如何创建一个没有滚动条的动态可缩放的文本框

最新推荐文章于 2022-03-30 19:00:12 发布

ld_flex

最新推荐文章于 2022-03-30 19:00:12 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： function import string application encoding setter

本文链接：https://blog.youkuaiyun.com/ld_flex/article/details/5798564

本文介绍了一种自适应高度的TextArea组件实现方法，通过扩展TextArea并重写text和height属性的Setter方法，使得组件能够根据输入文本的长度自动调整高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来自Adobe Devnet：

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postid=13628&loc=en_US&productid=2

问题描述：

我需要创建一个固定尺寸的TextArea组件，但是如果用户输入的文本长度超出了TextArea的高度，我希望TextArea能自动改变高度，而不是使用滚动条。

解决方案：

扩展TextArea，重写text和height属性的Setter方法，并且添加一个事件来侦听文本内容的改变。

主要代码：

  
    
     private 
     function adjustHeightHandler
     (event:Event
     ):
     void
     {
    

        
     trace
     (
     "textField.getLineMetrics(0).height: " + 
     textField.
     getLineMetrics
     (
     0
     ).
     height
     );
    

        
     if
     (
     height 
     <= 
     textField.
     textHeight + 
     textField.
     getLineMetrics
     (
     0
     ).
     height
     )
     {
    

            
     height = 
     textField.
     textHeight;
    

    
             validateNow
     (
     );
    

        
     }
    

    
     }

演示以及源码下载：

http://www.riameeting.com/examples/DynamicTextArea/DynamicTextAreaSample.html

点击右键可查看源码

DynamicTextAreaSimple.mxml

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:comp="*" creationComplete="init();" viewSourceURL="srcview/index.html">
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
     
      private var str:String = "This text will be long enough to trigger " +
        "the TextArea to increase its height.";
      private function setLargeText():void{
        txt1.text = str;
        txt2.text = str;
        txt3.text = str;
        txt4.text = str;
      }
    ]]>
  </mx:Script>
  <comp:DynamicTextArea id="txt1" width="300" height="14"/>
  <comp:DynamicTextArea id="txt2" width="300" height="20"/>
  <comp:DynamicTextArea id="txt3" width="300" height="28"/>
  <comp:DynamicTextArea id="txt4" width="300" height="50"/>
  <mx:Button label="Set Large Text" click="setLargeText();"/>
</mx:Application>


DynamicTextArea.as
package {
  import flash.events.Event;
  import mx.controls.TextArea;
 
  public class DynamicTextArea extends TextArea{
    public function DynamicTextArea(){
      super();
      super.horizontalScrollPolicy = "off";
      super.verticalScrollPolicy = "off";
      this.addEventListener(Event.CHANGE, adjustHeightHandler);
    }
    private function adjustHeightHandler(event:Event):void{
      trace("textField.getLineMetrics(0).height: " + textField.getLineMetrics(0).height);
      if(height <= textField.textHeight + textField.getLineMetrics(0).height){
        height = textField.textHeight;     
        validateNow();
      }
    }
    override public function set text(val:String):void{
      textField.text = val;
      validateNow();
      height = textField.textHeight;
      validateNow();
    }
    override public function set height(value:Number):void{
      if(textField == null){
        if(height <= value){
          super.height = value;
        }
      }else{       
        var currentHeight:uint = textField.textHeight + textField.getLineMetrics(0).height;
        if (currentHeight<= super.maxHeight){
          if(textField.textHeight != textField.getLineMetrics(0).height){
            super.height = currentHeight;
          }        
        }else{
            super.height = super.maxHeight;         
        }  
      }
    }
    override public function get text():String{
        return textField.text;
    }
    override public function set maxHeight(value:Number):void{
      super.maxHeight = value;
    }
  }
}