如何将 TextArea 高度设置为其内容高度答案

【问题标题】：How to set TextArea height to its content height如何将 TextArea 高度设置为其内容高度
【发布时间】：2010-06-21 14:39:59
【问题描述】：

我有一个 mx:TextArea，我希望它的高度与它的内容高度相同。没有什么花哨的 - 只是一个文本区域和不可编辑的文本。我需要一种简单可靠的方法来使控件适合并显示所有文本而无需垂直滚动——比如自动调整大小。此外，我的控件文本将仅设置一次，并且不会更改，因为它不可编辑。

<mx:TextArea id="myTextArea"
             editable="false"
             width="100%"
             verticalScrollPolicy="off" >
   <mx:text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id lorem 
      quis ante pulvinar auctor at eget risus. Nulla facilisi. Morbi ultricies 
      dignissim lorem, quis suscipit felis ullamcorper et.
   </mx:text>
</mx:TextArea>

还有一篇关于同一主题的帖子here，但这与我无关，因为那里的设置要复杂得多，因为它包括样式和绑定。

【问题讨论】：

可能重复：stackoverflow.com/questions/5672402/…

标签： apache-flex mxml flex4

【解决方案1】：

使用TextArea 的textHeight 只读属性，并将TextArea 的高度设置为TextArea.textHeight + TextArea 使用的任何垂直填充加上顶部和底部边框的高度（检查TextArea 组件并弄清楚）。这个过程应该发生在您为TextArea 添加到change 事件的处理程序中。

【讨论】：

其他注意事项：textHeight 属性不适用于 spark 组件。相反，只需在 mxml 中设置 TextArea 属性 heightInLines={NaN}（或在 AS3 中设置 =NaN）。见：blog.flexexamples.com/2010/01/18/…

【解决方案2】：

如果您想坚持使用 spark 文本区域组件，请使用以下代码：

<s:TextArea 
   id="myTextArea"
   editable="false"
   width="100%"
   verticalScrollPolicy="off"
   change="myTextArea.height = myTextArea.scroller.viewport.contentHeight + 2;">
    <s:text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id lorem 
        quis ante pulvinar auctor at eget risus. Nulla facilisi. Morbi ultricies 
        dignissim lorem, quis suscipit felis ullamcorper et.
    </s:text>
</s:TextArea>

或者您可以将更改处理程序放在一个函数中。

【讨论】：

通过代码设置文本时，即使在普通项目中也不起作用。我建议在updateComplete 事件上调整高度。

【解决方案3】：

我在Jack Moore's Autosize script 方面取得了巨大成功。它是轻量级的，只需一行即可在所有文本区域上实现：autosize($('.MyTextAreaClass'));

【讨论】：

【解决方案4】：

除了滚动策略之外，我建议使用“wordWrap='true'”。

【讨论】：

不，不是这样。如果文本超过容器的宽度，自动换行只会将文本转移到新行。