The following example shows how you can set the selected text in a Flex TextArea control by using the setSelection() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/25/setting-text-selection-on-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.IUITextField;
            import mx.events.SliderEvent;
            import mx.controls.sliderClasses.Slider;

            private function slider_change(evt:SliderEvent):void {
                var value1:int = Slider(evt.currentTarget).values[0];
                var value2:int = Slider(evt.currentTarget).values[1];
                var min:int = Math.min(value1, value2);
                var max:int = Math.max(value1, value2);
                textArea.setSelection(min, max);
            }

            private function init():void {
                var tf:IUITextField = textArea.mx_internal::getTextField();
                tf.alwaysShowSelection = true;
                textArea.verticalScrollPosition = 0;
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.html" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="setSelection():">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="{textArea.htmlText.length}"
                        thumbCount="2"
                        liveDragging="true"
                        allowThumbOverlap="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            htmlText="{lorem}"
            textAlign="justify"
            condenseWhite="true"
            width="100%"
            height="100%"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

You can also set the selected text in a TextArea control by setting the selectionBeginIndex and selectionEndIndex properties, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/25/setting-text-selection-on-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.IUITextField;
            import mx.events.SliderEvent;
            import mx.controls.sliderClasses.Slider;

            private function slider_change(evt:SliderEvent):void {
                textArea.selectionBeginIndex = beginSlider.value;
                textArea.selectionEndIndex = endSlider.value;

                textArea.validateNow();
                beginLabel.text = textArea.selectionBeginIndex.toString();
                endLabel.text = textArea.selectionEndIndex.toString();
            }

            private function init():void {
                var tf:IUITextField = textArea.mx_internal::getTextField();
                tf.alwaysShowSelection = true;
                textArea.verticalScrollPosition = 0;
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.html" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="selectionBeginIndex:"
                    direction="horizontal">
                <mx:HSlider id="beginSlider"
                        minimum="0"
                        maximum="{textArea.htmlText.length}"
                        value="0"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label id="beginLabel" />
            </mx:FormItem>
            <mx:FormItem label="selectionEndIndex:"
                    direction="horizontal">
                <mx:HSlider id="endSlider"
                        minimum="0"
                        maximum="{textArea.htmlText.length}"
                        value="0"
                        snapInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label id="endLabel" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            htmlText="{lorem}"
            textAlign="justify"
            condenseWhite="true"
            width="100%"
            height="100%"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

5 Responses to Setting text selection on a TextArea control in Flex

  1. JabbyPanda says:

    Thanks for sharing this sample, that was helpful

    2 notes regarding this sample:

    1) Sample code will work only for Adobe Flex SDK 3 and higher, because it uses interface mx.core.IUITextField that had appeared only from Adobe Flex SDK 3

    2) Why we have to set explicitly tf.alwaysShowSelection = true in order to make method public method of textArea “setSelection” working, why tf.alwaysShowSelection property is not set to TRUE inside mx:TextArea code?

  2. Pete Moss says:

    Is there any way to set styles on the selection? E.G., can you set the backgroundColor, backgroundAlpha, etc.?

  3. peterd says:

    Pete Moss,

    I don’t believe you can in Flex 3.x, but Flex Gumbo/Flash Player 10 will offer greater control over text selection colors.

    Peter

  4. Consistently the clearest and most useful Flex blog in town. Every time I google a Flex problem I have my fingers crossed that this blog will come up in the search results. Thanks for all your efforts. :-)

    rob

  5. Trying to capture the screen position of a dropped object in Flex 3.
    Have you seen any examples of this ?
    Thank You
    Dennis

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree