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

Question

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

5

我有一个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>

在同一主题下还有一篇文章，但对我来说并不相关，因为那里的设置更加复杂，包括样式和绑定。

- Branislav Abadjimarinov

可能是重复问题：https://dev59.com/f1bTa4cB1Zd3GeqP8z6L - ggkmath

4个回答

3

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

- Robusto

注意：Spark组件上没有textHeight属性。相反，在mxml中设置TextArea属性heightInLines={NaN}（或在AS3中设置=NaN）。参见：http://blog.flexexamples.com/2010/01/18/creating-a-vertically-auto-resizing-spark-textarea-control-in-flex-4/ - ggkmath

0

我使用Jack Moore的Autosize脚本取得了很大的成功。它很轻量级，只需一行代码即可在所有文本区域上实现：autosize($('.MyTextAreaClass'));

- Michael Romrell

-1

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

- phtrivier

不，那不是这样的。自动换行只会在文本超出容器宽度时将其转移到新的一行。 - Branislav Abadjimarinov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- stickboywarren · Accepted Answer

如果您想继续使用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>

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