The following example shows how you can restrict which characters a user can enter into a Flex TextInput control by setting the restrict property.

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.

 
Tagged with:
 
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.

14 Responses to Restricting which characters a user can type in a TextInput control in Flex

  1. Jason says:

    Nice example, Have you ever tried dragging text into a textInput or TextArea control before?

  2. coco says:

    hi,peter,I need you help,can you give me a example about displaying word or excel in flex? I have no idea,please give me some advice,thank you in advanced.

  3. Om Muppirala says:

    I have discussed an edge case in restricting characters in a TextInput control here:
    http://www.bigosmallm.com/2008/03/how-to-restrict-backslash-character.html

  4. stream says:

    I only a little English, it may not clear expression.
    i found a bug of PopUpButton.
    Can you help me?

    pop is useful in the Application of tag.

    But…. PopUpButton is invalid in the TitleWindow tag

    i need you help for me, please…

  5. peterd says:

    stream,

    I’ve filed a bug for the issue at http://bugs.adobe.com/jira/browse/SDK-15590 . Feel free to add any other comments to the bug, or subscribe/watch the bug for future updates.

    Thanks,
    Peter

  6. missamma says:

    Can anypne pls tell me how to restrict the first character of the textInput..?

    I mean user the should able to enter a string which starts with only alphabet..?

    Regards
    Missamma.

  7. how can I exclude &? says:

    How can I exclude &.

    Thanks

  8. Peter deHaan says:

    Using MXML:

    <mx:TextInput id="textInput"
            restrict="^&amp;" />
    

    Using ActionScript:

    private var textInput:TextInput;
    private function init():void {
        textInput = new TextInput();
        textInput.restrict = "^&";
        addChild(textInput);
    }
    

    Peter

  9. Saroj Panda says:

    I have to do the validation that user can enter hyphen(-) only once in the textinput. Can anyone help me. Urgent!!

  10. hardik says:

    how to restrict double quotes in a text input field

    • Peter deHaan says:

      @hardik,

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       
          <mx:Script>
              <![CDATA[
                  protected function init():void {
                      txtInput2.restrict = "^\"";
       
                      /* or */
       
                      txtInput2.restrict = '^"';
                  }
              ]]>
          </mx:Script>
       
          <mx:TextInput id="txtInput1" restrict="^&quot;" />
          <mx:TextInput id="txtInput2" initialize="init();" />
       
      </mx:Application>

      Peter

  11. louis says:

    hi peter, how to restrict enter in a text area. i try restrict=”[^\n]“.
    but didn’t work. thanks

  12. dirk says:

    hi peter, how do you restrict a range of numbers as from 1 to 12?
    Thanks a lot

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