Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/30/always-displaying-the-selected-text-in-a-textinput-in-flex/ -->
<mx:Application name="TextInput_getTextField_alwaysShowSelection_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.UITextField;
            import mx.controls.TextInput;

            private function init(evt:Event):void {
                var ti:TextInput = evt.currentTarget as TextInput;
                var tf:UITextField = ti.mx_internal::getTextField();
                tf.alwaysShowSelection = true;
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="textInput"
            text="The quick brown fox jumps over the lazy dog."
            selectionBeginIndex="4" selectionEndIndex="9"
            initialize="init(event);" />
    <mx:Button label="Submit" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/27/setting-the-horizontal-scroll-position-in-the-textinput-control-in-flex/ -->
<mx:Application name="TextInput_horizontalScrollPosition_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function textInput_change(evt:Event):void {
                slider.maximum = textInput.maxHorizontalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalScrollPosition:">
                <mx:HSlider id="slider"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput"
            text="The quick brown fox jumps over the lazy dog."
            horizontalScrollPosition="{slider.value}"
            width="100"
            creationComplete="textInput_change(event);"
            change="textInput_change(event);" />

</mx:Application>

 

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/08/displaying-a-border-on-specific-sides-of-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function setBorderSides():void {
                var arr:Array = [];
                if (leftCheckBox.selected) {
                    arr.push("left");
                }
                if (rightCheckBox.selected) {
                    arr.push("right");
                }
                if (topCheckBox.selected) {
                    arr.push("top");
                }
                if (bottomCheckBox.selected) {
                    arr.push("bottom");
                }
                textInput.setStyle("borderSides", arr.join(" "));
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="left:">
                <mx:CheckBox id="leftCheckBox"
                        selected="true"
                        change="setBorderSides();" />
            </mx:FormItem>
            <mx:FormItem label="right:">
                <mx:CheckBox id="rightCheckBox"
                        selected="true"
                        change="setBorderSides();" />
            </mx:FormItem>
            <mx:FormItem label="top:">
                <mx:CheckBox id="topCheckBox"
                        selected="true"
                        change="setBorderSides();" />
            </mx:FormItem>
            <mx:FormItem label="bottom:">
                <mx:CheckBox id="bottomCheckBox"
                        selected="true"
                        change="setBorderSides();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput"
            borderSides="left right"
            borderColor="red"
            borderStyle="solid" />

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/24/detecting-a-double-click-on-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function textInput_doubleClick(evt:MouseEvent):void {
                var ti:TextInput = evt.currentTarget as TextInput;
                ti.enabled = !ti.enabled;
                ti.editable = ti.enabled;
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="textInput1"
            text="The quick brown fox jumped over the lazy dog"
            doubleClickEnabled="true"
            doubleClick="textInput_doubleClick(event);" />

    <mx:TextInput id="textInput2"
            text="The quick brown fox jumped over the lazy dog"
            doubleClickEnabled="true"
            doubleClick="textInput_doubleClick(event);" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/24/detecting-a-double-click-on-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;

            private var textInput1:TextInput;
            private var textInput2:TextInput;

            private function init():void {
                textInput1 = new TextInput();
                textInput1.text = "The quick brown fox jumped over the lazy dog";
                textInput1.doubleClickEnabled = true;
                textInput1.addEventListener(MouseEvent.DOUBLE_CLICK,
                            textInput_doubleClick);
                addChild(textInput1);

                textInput2 = new TextInput();
                textInput2.text = "The quick brown fox jumped over the lazy dog";
                textInput2.doubleClickEnabled = true;
                textInput2.addEventListener(MouseEvent.DOUBLE_CLICK,
                            textInput_doubleClick);
                addChild(textInput2);
            }

            private function textInput_doubleClick(evt:MouseEvent):void {
                var ti:TextInput = evt.currentTarget as TextInput;
                ti.enabled = !ti.enabled;
                ti.editable = ti.enabled;
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var corners:Array = [];
                if (tLeft.selected) {
                    corners.push("tl");
                }
                if (tRight.selected) {
                    corners.push("tr");
                }
                if (bLeft.selected) {
                    corners.push("bl");
                }
                if (bRight.selected) {
                    corners.push("br");
                }
                var str:String = corners.join(" ");
                textInput.setStyle("focusRoundedCorners", str);
                focusManager.setFocus(textInput);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="top left (tl):">
                <mx:CheckBox id="tLeft"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="top right (tr):">
                <mx:CheckBox id="tRight"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="bottom left (bl):">
                <mx:CheckBox id="bLeft"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="top right (br):">
                <mx:CheckBox id="bRight"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10" />

</mx:Application>

View source is enabled in the following example.

You can also set the focusRoundedCorners style in MXML, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10"
            focusRoundedCorners="tl br" />

</mx:Application>

Or, you can set the focusRoundedCorners style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TextInput {
            focusRoundedCorners: "tl br";
        }
    </mx:Style>

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10" />

</mx:Application>

 

Full code after the jump.

The following example sets the restrict property to “0-9\-”, which only allows numbers and the hyphen (-) character:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/15/restricting-which-characters-a-user-can-type-in-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function textInput_change(evt:Event):void {
                arrColl.addItem(evt);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:TextInput id="textInput"
                restrict="0-9\\-"
                change="textInput_change(event);" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/12/changing-the-focus-rectangle-color-on-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.DropdownEvent;
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                textInput.setStyle("themeColor", evt.color);
            }

            private function colorPicker_close(evt:DropdownEvent):void {
                focusManager.setFocus(textInput);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="themeColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);"
                        close="colorPicker_close(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput" />

</mx:Application>

View source is enabled in the following example.

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/07/preventing-line-feeds-in-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function textArea_textInput(evt:TextEvent):void {
                if (evt.text == "\\n") {
                    evt.preventDefault();
                }
            }
        ]]>
    </mx:Script>
 
    <mx:TextArea id="textArea"
            verticalScrollPolicy="on"
            width="160"
            height="120"
            textInput="textArea_textInput(event);">
        <mx:text>The quick brown fox jumped over the lazy dog.</mx:text>
    </mx:TextArea>
 
</mx:Application>

View source is enabled in the following example.

Update 8/19/2008: If you want to prevent a user from pasting text with a carriage return/linefeed, you could listen for the change event and use the String class’s replace() method to replace any newline (“\n”) or linefeed (“\r”) with an empty string, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/07/preventing-line-feeds-in-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function textArea_textInput(evt:TextEvent):void {
                if (evt.text == "\\n") {
                    evt.preventDefault();
                }
            }
            private function textArea_change(evt:Event):void {
                textArea.text = textArea.text.replace(/\\n|\\r/ig, "");
            }
        ]]>
    </mx:Script>
 
    <mx:TextArea id="textArea"
            text="The quick brown fox jumped over the lazy dog."
            verticalScrollPolicy="on"
            width="100%"
            height="100%"
            textInput="textArea_textInput(event);"
            change="textArea_change(event);" />
 
</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/27/displaying-a-textinput-controls-text-as-a-password-in-flex-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.managers.PopUpManager;

            private var alert:Alert;

            private function submit_click():void {
                alert = Alert.show("Closing in 3 seconds.",
                                    "Submitting...");
                setTimeout(closeAlert, 3000);
            }

            private function reset_click():void {
                alert = Alert.show("Closing in 1 second.",
                                    "Resetting...");
                username.text = "";
                password.text = "";
                setTimeout(closeAlert, 1000);
            }

            private function closeAlert():void {
                PopUpManager.removePopUp(alert);
            }
        ]]>
    </mx:Script>

    <mx:Panel title="Login">
        <mx:Form>
            <mx:FormItem label="Username:" required="true">
                <mx:TextInput id="username"
                        text="JohnDoe"
                        maxChars="16" />
            </mx:FormItem>
            <mx:FormItem label="Password:" required="true">
                <mx:TextInput id="password"
                        text="p455w0rd"
                        maxChars="16"
                        displayAsPassword="true"
                        focusIn="password.displayAsPassword = false;"
                        focusOut="password.displayAsPassword = true;" />
            </mx:FormItem>
        </mx:Form>
        <mx:ControlBar horizontalAlign="right">
            <mx:Button id="submit"
                    label="Submit"
                    click="submit_click();" />
            <mx:Button id="reset"
                    label="Reset"
                    click="reset_click();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.