关于Flex的TextArea控件的例子，前面已经介绍了不少，包括设置该控件文本无效时的颜色，如何利用setSelection事件设定文本选中范围，如何利用htmlText属性以及condenseWhite属性紧缩HTML空格……等等，可以直接点TextArea Tag查看–WordPress的Tag功能，其实是非常不错。
接下来的例子，演示了Flex中如何利用getTextField事件和numLines属性，计算出TextArea控件中内容的行数。
让我们先来看一下Demo
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
- <mx:Script>
- <![CDATA[
- import mx.utils.StringUtil;
- private function textArea_change(evt:Event):void {
- callLater(updateStats, [evt]);
- }
- private function updateStats(evt:Event):void {
- var nLines:uint = textArea.mx_internal::getTextField().numLines;
- var nChars:uint = textArea.length;
- var str:String = "{0} characters; {1} lines";
- panel.status = StringUtil.substitute(str,
- nChars,
- nLines);
- }
- ]]>
- </mx:Script>
- <mx:String id="str" source="lorem.txt" />
- <mx:ApplicationControlBar dock="true">
- <mx:Form styleName="plain">
- <mx:FormItem label="width (%):">
- <mx:HSlider id="slider"
- minimum="50"
- maximum="100"
- value="100"
- liveDragging="true"
- snapInterval="1"
- tickInterval="10" />
- </mx:FormItem>
- </mx:Form>
- </mx:ApplicationControlBar>
- <mx:Panel id="panel"
- percentWidth="{slider.value}"
- height="100%">
- <mx:TextArea id="textArea"
- htmlText="{str}"
- condenseWhite="true"
- width="100%"
- height="100%"
- change="textArea_change(event);"
- resize="textArea_change(event);" />
- </mx:Panel>
- </mx:Application>