Restricting which characters a user can type in a Spark TextInput control in Flex 4

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

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/21/restricting-which-characters-a-user-can-type-in-a-spark-textinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_restrict_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:SimpleText text="Allowed characters are 0-9 and A-F:" />
        <s:TextInput id="textInput"
                restrict="0-9A-F"
                widthInChars="20"
                maxChars="20" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/21/restricting-which-characters-a-user-can-type-in-a-spark-textinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_restrict_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import spark.primitives.SimpleText;
            import spark.components.VGroup;
            import spark.components.TextInput;
 
            private var vGroup:VGroup;
            private var simpleText:SimpleText;
            private var textInput:TextInput;
 
            private function init():void {
                simpleText = new SimpleText();
                simpleText.text = "Allowed characters are 0-9 and A-F:";
 
                textInput = new TextInput();
                textInput.restrict = "0-9A-F";
                textInput.widthInChars = 20;
                textInput.maxChars = 20;
 
                vGroup = new VGroup();
                vGroup.horizontalCenter = 0;
                vGroup.verticalCenter = 0;
                vGroup.addElement(simpleText);
                vGroup.addElement(textInput);
                addElement(vGroup);
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

2 thoughts on “Restricting which characters a user can type in a Spark TextInput control in Flex 4

  1. Hi. I’m using Flex for working, and I would like to know how to add the character “-“, because I have the following list in a property file:
    caracteres_descripcion =a-zA-Z.á é í ó ú ü ö ä ë ï + _ ,0-9ñ Ñ( )[ ]{ }·’:;#@$?¿!¡%*/ªº¬€
    Flex application:
    restrict=”{resourceManager.getString(‘my_project’,’caracteres_descripcion’)}”

    But I don’t know why I’m not able to add the character “-“. I tried before, after… I think it’s same kind of escape sequence for delimitate ranks, like “a-z”, “A-Z”.

    Can anyone help to me?? Please, if it’s possible reply me at mail :)

    Thank you anyway!!!

  2. I found it!!

    It was to easy I need to add: “\-”

    so my characters available are now:
    caracteres_descripcion =\-a-zA-Z.á é í ó ú ü ö ä ë ï + _ ,0-9ñ Ñ( )[ ]{ }·’:;#@$?¿!¡%*/ªº¬€

    Thank you anyway. The best regards from Spain!!
    Ñ Power!!

Comments are closed.