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

by Peter deHaan on April 21, 2009

in TextInput (Spark), beta1

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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?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 comments… read them below or add one }

1 Jesus August 20, 2009 at 1:08 am

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!!!

Reply

2 Jesus August 20, 2009 at 1:24 am

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!!

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: