Insert Text at specified position of TextInput, TextArea and TextField, etc. in Flex

December 17th, 2008 Ntt.cc

Editor-128x128 Someone asked me how to insert text into input components such as TextInput and TextArea at a specified position programmatically.

Solution Summery:TextInput and TextArea are warped for the TextField interactive object contained in the package flash.text. TextField class provides the function replaceText() to help us to complete the insertion.

Search-256x256 Demo | DownloadDownload Full Project

ScreenShot:

insert-text

The following is full source code :

Download: InsertText.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application 
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"
  4.     layout="absolute" xmlns:mxeffects="com.adobe.ac.mxeffects.*"
  5.     creationComplete="onCreationComplete();">
  6.     <mx:Script>
  7.         <![CDATA[
  8.             import mx.core.mx_internal;
  9.             use namespace mx_internal;
  10.            
  11.             private var textField:TextField;
  12.            
  13.             [Bindable]
  14.             private var insertionPointIndex:int;
  15.            
  16.             private function onCreationComplete():void
  17.             {
  18.                 textField = TextField(myText.getTextField());
  19.                 textField.addEventListener(MouseEvent.CLICK,onTextFieldClick);
  20.                 myText.addEventListener(TextEvent.TEXT_INPUT,onTextAreaTextInput);
  21.                 myText.addEventListener(Event.CHANGE,onTextAreaChange);
  22.             }
  23.            
  24.             private function onTextFieldClick(event:Event):void
  25.             {
  26.                 update();
  27.             }
  28.            
  29.             private function onTextAreaTextInput(event:Event):void
  30.             {
  31.                 update();
  32.             }
  33.            
  34.             private function onTextAreaChange(event:Event):void
  35.             {
  36.                 update();
  37.             }
  38.            
  39.             private function update():void
  40.             {
  41.                 insertionPointIndex = textField.caretIndex;
  42.             }
  43.            
  44.             private function insert():void
  45.             {
  46.                 textField.replaceText(insertionPointIndex,insertionPointIndex,insertion.text);
  47.             }
  48.         ]]>
  49.     </mx:Script>
  50.     <mx:Panel width="100%" height="100%">
  51.         <mx:TextArea id="myText" width="100%" height="100%" >
  52.            
  53.         </mx:TextArea>
  54.         <mx:ControlBar>
  55.             <mx:Form>
  56.                 <mx:FormItem label="insertion point index">
  57.                     <mx:Label text="{insertionPointIndex}"/>
  58.                 </mx:FormItem>
  59.             </mx:Form>
  60.             <mx:FormItem label="insertion" direction="horizontal">
  61.                 <mx:TextInput id="insertion"/>
  62.                 <mx:Button label="insert" click="insert();"/>
  63.             </mx:FormItem>
  64.         </mx:ControlBar>
  65.     </mx:Panel>   
  66. </mx:Application>

Enjoy!!

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
Posted in Flex Tags: , , 3,114 views
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed

Related Post

« stringHasValue of StringUtil, makeMorning and makeNight of DateUtil on AS3Corelib 0.92.1 help us handle strings and dates
Vista Web Photo Gallery– A Very Useful Photo Album Builder Based On Ajax »
You can leave a response, or trackback from your own site.

One Response to “Insert Text at specified position of TextInput, TextArea and TextField, etc. in Flex”

  1. eBuildy says:
    May 10, 2009 at 2:02 am

    You can use the simple replaceSelectedText function instead.

    eBuildy, the Web2 builders

Leave a Reply

  • Ads