Using prompts with text controls

The Spark TextInput and TextArea controls support a prompt property that lets you specify text that helps users know what to enter. For example, an input field might include prompt text that says “Search”.

Prompt text appears when the text control is first created. Prompt text disappears when the control gets focus or when the control’s text property is non-null. Prompt text reappears when the control loses focus, but only if no text was entered (if the value of the text field is the empty string).

For text controls, if the user enters text, but later deletes it, the prompt text reappears when the control loses focus. You can also cause the prompt text to reappear programmatically by setting the text control’s text property to null or the empty string.

The following example creates a TextInput and TextArea control with prompt text. You can focus on the text controls and enter text, which causes the prompt text to disappear. If you click the Reset button, the prompt text reappears.
<?xml version="1.0"?> 
<!-- sparktextcontrols/BasicPromptExample.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"> 
  
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <fx:Script>  
    <![CDATA[  
        /* If you reset the text properties of the TextInput and TextArea controls to null 
            or the empty string, the prompt text reappears. */ 
        private function resetPrompts():void { 
            myTextInput.text = ""; 
            myTextArea.text = ""; 
        } 
      ]]>  
  </fx:Script>  
  
    <s:TextInput id="myTextInput" prompt="Enter name..."/> 
    <s:TextArea id="myTextArea" prompt="Enter details..."/> 
    <s:Button label="Reset" click="resetPrompts()"/> 
 
</s:Application>
The executing SWF file for the previous example is shown below:

The Spark ComboBox control also supports the prompt property because it uses the Spark TextInput control as a subcontrol. For more information, see Use prompt text with the Spark ComboBox control.