10/02/2008

TextInput - restrict

I want to start with a very small and easy tip for TextInput component that not everyone knows and I find very usefull.

This tip is about the "restrict" property of TextInput in Flex, by using this property we can indicate the set of characters that the user can enter into the control.

For example, if we use:

<mx:TextInput id="myTextInput" restrict="/A-Z0-9"/>

Our TextInput will only allow the user to input capital letters and numbers.

Other example values for this field could be:

"^a-z" //this would accept all characters except lowcase from a to z.
"A-Z^Q" //this would only accept capital letters from A to Z except Q.

There are many different combinations we can use to make the TextInput work as we need, you can see how to use this property here.

11 comments:

  1. This is a great tip Pascualin. Do you know if we can use regular expressions in general?

    ReplyDelete
  2. Hi Oscar, I'm afraid that RegExp are thought to work with Validators, I have done an example with a RegExp, and it doesn't give any errors, but the "restrict" field will just interpretate the RegExp as a normal String (it will not know that "d" means a "digit" and will just interpretate it as a lower case letter "d".

    1 [ Bindable ]
    2 public var regExp : RegExp = /ABC\d*/i;
    3
    4 .........
    5
    6 < mx:TextInput id="myTextInput" restrict="{ regExp }"/>

    ReplyDelete
  3. Hi Srnivas, thanks for the comment ;)

    ReplyDelete
  4. I have added your blog for my Google RSS reader and will be doing some TDD and Unit Testing on Flex side and i see you few posts on it. I will post my comments once i start reading your post for them and also thanks a lot for writing them up.

    ReplyDelete
  5. Thanks Srinivas, I also added your blog to my RSS reader, so maybe we can share knowledge through our comments ;)

    Thanks a lot!

    ReplyDelete
  6. Hey, I wanted User to enter the "amount" upto only two decimal places...
    e.g. i want user to enter only 23.22 not 23.45565767

    ReplyDelete
  7. Hi Rashmi,

    You will need to use either Regular Expressions or a Currency Formatter fot that.

    http://livedocs.adobe.com/flex/3/html/help.html?content=12_Using_Regular_Expressions_03.html

    http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/formatters/CurrencyFormatter.html

    Thanks,
    Ignacio

    ReplyDelete
  8. I want to restrict textInput field in such a way that user can enter a string of length six and first charecter should be "K" and other rest should be digits for example 'K33355' , 'K45444' etc. anyone who can help me please. send me its solution on "maanjems10@gmail.com"

    ReplyDelete
  9. Hi Muhammad,

    thanks for your comment. Once again I´d suggest to use regular expressions for this, please refer to the scond comment for more details.

    ReplyDelete
  10. I want to allow user to enter only F1 key. All other keys should be restricted. Can you send me the solution.

    ReplyDelete