Component: Masked TextInput

The Masked TextInput is now available on the Adobe Flex Exchange (click the Exchange link if the direct component link doesn’t seem to work). You may post questions and feedback in the comments here and the authors will try to respond.

37 Responses to Component: Masked TextInput

  1. Tahir Alvi says:

    is this example work in Flash Builder 4.6 and AIR 3.2 SDK ?

  2. Sameer says:

    You can download the component from http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1049969#The sample is included in the zip file.

  3. Mike Azar says:

    Can I download the entire sample to look at it?http://examples.adobe.com/flex2/exchange/MaskedTextInput/Reservation/Reservation.htmlif so where? I’m missing this file “com\adobe\flex\extras\skins\MTISkin.as”

  4. Sameer says:

    MaskedTextInput works good in the case when the number of input characters are known.In this case, you can specify the mask to have three digits and enter a 0 for the first digit.- Sameer

  5. Lars says:

    Hi Paul,I’m very interested in your MaskedTextInput component and would like to use it but I haven’t found a way to specify a mask for a decimal number (i.e. currency) where you could have a blank char at the beginning.How do I mask this:1.) $10,000.502.) $100,111.25I can’t see how to make the mask before the fist comma accept 2 or 3 digits and neither to use a decimal point.Any help would be appreciated!Lars

  6. paul says:

    Thanks for the input. What I want regarding selection, is that when the object gains focus it should be fully selected.However, if when an item is fully selected and the user begins typing it does not erase the contents and place the cursor at the first character it would confuse the user.Regarding the shifting left bit I understand the dilemma, but I really would like to see the other issues addressed.Paul

  7. Sameer says:

    Hi Paul,Programmatic selection of the entire field can be achieved by doing this -mti.setFocus();mti.setSelection(0, mti.fullText.length);where ‘mti’ is the id of the MaskedTextInput control.Also, triple clicking the field will select the entire text.When some characters are deleted, the characters on the right do not shift to left because the ‘Mask’ of the characters on the left may not match with the characters on the right.In other TextFields this is not the case because usually they do not have a Mask specified.Thanks,Sameer

  8. Paul says:

    When I select data in the field and begin typing I get inconsistent, and undesireable results.I have a mask of “AAAAAAAAAAAAAAAAAA” I initially enter the field and type “dog” it displays “DOG”. I leave the field, and come back and select all the characters with a mouse click drag action. With “DOG” completely selected I type “a”, I end up with “AOG” not “A” as I would expect.Using the above scenario, I have been unable to determine the exact sequence of events that will cause it to append a character instead of overwriting the first character, but it does that some times as well.I think the following changes would be beneficial;1) If I select characters and start typing, for the code to behave as it does when I select characters strike backspace, and start typing.2) Create a property that would allow automatic selection of the entire field on focus, and behave as 1) above.One last note on selection behavior, when a part of the string is selected and delete is struck, it erases the characters selected, puts the cursor in the first deleted character and allows the user to begin typing effectively in “overwrite” mode. This is very different from most other input boxes. The standard behavior is to delete the characters, shift remaining characters to the left, put the cursor at the deletion point and allow insert.I am torn between which is the better way of doing things, and would like your thoughts on the subject.Paul

  9. Sameer says:

    Hi,Only monospaced or fixed-width fonts such as Courier, Lucida Console, etc. can be used with the MaskedTextInput component.Thanks,Sameer

  10. Avon says:

    You can’t change the font, font size etc on the masktextinput. I’ve tried using a style sheet and setting it on the tag, both don’t work.Is there a work around?Thanx

  11. Sameer says:

    Can you post the sample code so that we can get an idea about how you are using the component.Thanks,Sameer

  12. Paul says:

    The last message should have had the following line wrapped in < >fc:MaskedTextInput width=”84″ id=”txtDateTo” inputMask=”MM/DD/YYYY” x=”232″ y=”66″/Paul

  13. Paul says:

    I have a problem with MaskedTextInput;The situation is that I have created (copied from the sample provided) a MaskedTextInput field like;I added a date chooser popup to populate the field, also copied from the sample provided. When I select a date from the popup it puts the date in the field, but as soon as I click into another field it writes the mask MM/DD/YYYY on top of the data, yielding an unreadable field.I tried to copy things correctly, and can’t see anything wrong.Any ideas?I posted it here as well;http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1294484&CFID=3720698&CFTOKEN=1b95f9cab6865e5b-F9DB6B20-CC1C-2CFD-2A70A8B94E341FB3&jsessionid=4830c0030c8060411c61

  14. Sameer says:

    Have a look at the sample provided with the component –http://examples.adobe.com/flex2/exchange/MaskedTextInput/Reservation/Reservation.htmlThe Journey Details tab uses a DateChooser component to populate the MaskedTextInput.- Sameer

  15. max says:

    Hi,i try to set the date with the code like that:<ns2:MaskedTextInput id=”dt”inputMask=”DD/MM/YYYY” autoAdvance=”true”text=”{new Date()}”……..(same that datefield flex component…)but don’t work fine (the date displayed is incorrect).Is possible to set this property with action script 3 (get newDate() + DateFormatter+ return value)?

  16. Sameer says:

    MaskedTextInput has been updated with the following issues resolved -1. When parentheses is used as the first character in the mask, then the first character from the text was getting cut off.2. Change event not firing properly.The patch can be downloaded from here –http://weblogs.macromedia.com/flexteam/files/MaskedTextInput.zip

  17. Sameer says:

    Hi,I’m able to reproduce the parentheses and the change event issue. But not the other issues. So, can you all please post some sample code which depicts the behavior you are refering to.Thanks,Sameer

  18. Mark Thielman says:

    We are also experiencing the issue with (###)###-#### phone numbers. Is this something that is being worked on? For now I changed to ###-###-#### but I’d like to use the other format.

  19. Zach Brown says:

    More info: it’s only a problem using AS to dynamically create the componenet if I try to do something like…var data:ObjectProxy = new ObjectProxy();data.number = “5554442222”;BindingUtils.Bind(input, “text”, data, number)

  20. Zach Brown says:

    Sorry, ignore the line number, that was from a different problem but… I can’t figure out how to get it to work while dynamically adding component.

  21. Zach Brown says:

    If you use action script to dynamically add the masked input component to a canvas or panel it throws an exception in the updateDisplayList() method. Looks like line 403 in maskedInput.as.i.e.var canvas:Canvas = new Canvas();var input:MaskedInput = new MaskedInput();input.inputMask = “(###) ###-####”;canvas.addChild(input);

  22. BigVirgil says:

    Same issue for me with the change event (that’s a real pain actually).I also found another bug: when you affect dynamically the inputMask, everything works fine as long as the new mask is the same length or has more mask characters, but big error when you try to affect a shorter mask than the previous one.Terribly annoying for the application I’m developping. I shall try and find a way to fix it on my own but a bit of help would be of course welcome.

  23. carlos arana says:

    The change event doesnt work as usual , sometimes is not sended after we press a backspaceSomebody see this behaviour

  24. Dear PeterHaving found your details on http://www.flexcoders.net, we are writing to express our interest in your suitability for a role we are looking to fill.We are a leading provider of online casual gaming and a developer of cutting-edge, person-to-person Gaming systems for major distribution partners and media groups worldwide.We are looking for an innovative and experienced Flex developer to join our young and vibrant team (on either a full time, part time or remote basis) of technical and creative minds, who are currently building a next-generation games platform. We are based in North West London with easy transport links and parking. An immediate start would be ideal.Please contact me if you would like more information.I look forward to hearing from you.Kind regardsSharon ParienteOperations ManagerThe Money Gaming Corporation Ltd.

  25. Tom Raic says:

    Figured out the bug behavior. WORKAROUND: Avoid two-way binding. You can bind out, but when pre-populating the maskedtextinput field, do it manually, and avoid binding the text property. This is the case only if you are binding out. But there is still a bug when parenthesis.

  26. Tom Raic says:

    There is a bug not only when using parenthesis, but when you try to use the mx:Binding tag to bind the source to another object:mx:Binding source=”{Number(workPhone.text)}” destination=”customer.workPhone”/Weird thing occurs with the key events. It jumps to th eend character, and takes two times to press a key number stroke.

  27. Tom Raic says:

    I noticed it works when I don’t use parenthesis. Bug? I think so.

  28. Tom Raic says:

    Ok. I downloaded the new version, and data binding works now. However, when I try binding a Number object like this:fx:MaskedTextInput id=”additionalPhone” inputMask=”(###) ###-####” text=”{customer.additionalPhone}”/and the value is 98765433210, the value of the input field looks like this:(876) 543-210#The last character gets cut off. It’s weird, because this works fine in a data grid, however, for a regular form field, it doesn’t.

  29. Tom Raic says:

    Ok. I downloaded the new version, and data binding works now. However, when I try binding a Number object like this:and the value is 98765433210, the value of the input field looks like this:(876) 543-210#The last character gets cut off. It’s weird, because this works fine in a data grid, however, for a regular form field, it doesn’t.

  30. Sameer says:

    Hi Carlos,The issue you mentioned is resolved and a new version of the Masked TextInput component is posted on the exchange. The properties text and fullText are now made Bindable.Sameer

  31. Hi,I’m tryng to bind the “text” property of this component and I can’t do it. A warnning in Flex Builder says that this property is not bindable so I open the code and see that the component overrides this property but does not mark for binding.Maybe a bug? There’s some reason to not make this property bindable?Thanks!C.

  32. Hi,I’m tryng to bind the “text” property of this component and I can’t do it. A warnning in Flex Builder says that this property is not bindable so I open the code and see that the component overrides this property but does not mark for binding.Maybe a bug? There’s some reason to not make this property bindable?Thanks!C.

  33. Sameer says:

    The control is made only for monospaced(fixed width) fonts because of the rectangular background cell(a.k.a. comb) which can be of the same width for all characters.If a non-monospaced (variable width) font is given, then the control will use the font ‘Courier’ by default. ‘Verdana’ is a non-monospaced (variable width) font.You can try with other monospaced (fixed width) fonts like Lucida Console ,etc.

  34. Jason says:

    The control is great, but how do you change it’s font from Courier? The class inherits from TextInput, so I set the fontFamily attribute to “Verdana”… but it still uses Courier.

  35. mikey says:

    Need some help.I have a tree on the left side of my hdividedbox and I want to display a form on the right side of the hdividedbox when the user selects the label of the tree.I have states set for each form but I don’t know if this is correct. It seems that I should be able to use the click event to set the currentState which would then display the form but I can’t get this to work.

  36. ceetah says:

    i have a problem… with FLEXi posted it here :http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1221192&enterthread=ymaybe you can also help me with this:http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1220802&enterthread=ythank you very much!PS: the forums are great for FLEX. saved my arse last time.