Editable text on a single line. See TextArea for editable text on multiple lines.

Set text to display

Set the text in MXML:

<js:TextInput text="Hello, FlexJS!"/>

Listen to events

Listen for changes to the text, such as when there is keyboard input:

<js:TextInput id="input" change="onChange(event)"/>
<fx:Script>
    <![CDATA[
        private function onChange(event:Event):void
        {
            trace("change:", input.text);
        }
    ]]>
</fx:Script>

Change text input appearance

Set font styles in a single text input:

<js:TextInput>
    <js:style>
        <js:SimpleCSSStyles fontFamily="serif" fontSize="20"
            fontWeight="bold" fontStyle="italic" color="#ff0000"/>
    </js:style>
</js:TextInput>

Set a text input's border styles:

<js:TextInput>
    <js:style>
        <js:SimpleCSSStyles borderStyle="solid" borderWidth="2"
            borderColor="#ff0000" borderRadius="4"/>
    </js:style>
</js:TextInput>

Set a text input's background color:

<js:TextInput>
    <js:style>
        <js:SimpleCSSStyles backgroundColor="#ffcccc"/>
    </js:style>
</js:TextInput>
  • No labels