Apr 26

Flex的TextArea控件中如何利用setSelection事件设定文本选中范围的例子

FlexAdd comments

接下来的例子演示了Flex的TextArea控件中，如何利用setSelection事件设定文本选中范围(移动下面Demo中的游标进行体验)。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.core.IUITextField;
  10.             import mx.events.SliderEvent;
  11.             import mx.controls.sliderClasses.Slider;
  12.  
  13.             private function slider_change(evt:SliderEvent):void {
  14.                 var value1:int = Slider(evt.currentTarget).values[0];
  15.                 var value2:int = Slider(evt.currentTarget).values[1];
  16.                 var min:int = Math.min(value1, value2);
  17.                 var max:int = Math.max(value1, value2);
  18.                 textArea.setSelection(min, max);
  19.             }
  20.  
  21.             private function init():void {
  22.                 var tf:IUITextField = textArea.mx_internal::getTextField();
  23.                 tf.alwaysShowSelection = true;
  24.                 textArea.verticalScrollPosition = 0;
  25.             }
  26.         ]]>
  27.     </mx:Script>
  28.  
  29.     <mx:String id="lorem" source="lorem.html" />
  30.  
  31.     <mx:ApplicationControlBar dock="true">
  32.         <mx:Form styleName="plain">
  33.             <mx:FormItem label="setSelection():">
  34.                 <mx:HSlider id="slider"
  35.                         minimum="0"
  36.                         maximum="{textArea.htmlText.length}"
  37.                         thumbCount="2"
  38.                         liveDragging="true"
  39.                         allowThumbOverlap="true"
  40.                         snapInterval="1"
  41.                         dataTipPrecision="0"
  42.                         change="slider_change(event);" />
  43.             </mx:FormItem>
  44.         </mx:Form>
  45.     </mx:ApplicationControlBar>
  46.  
  47.     <mx:TextArea id="textArea"
  48.             htmlText="{lorem}"
  49.             textAlign="justify"
  50.             condenseWhite="true"
  51.             width="100%"
  52.             height="100%"
  53.             creationComplete="init();" />
  54.  
  55. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

One Response to “Flex的TextArea控件中如何利用setSelection事件设定文本选中范围的例子”

Trackbacks

Leave a Reply