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.
Comments
i have a problem... with FLEX
i posted it here :
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1221192&enterthread=y
maybe you can also help me with this:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1220802&enterthread=y
thank you very much!
PS: the forums are great for FLEX. saved my arse last time.
Posted by: ceetah | December 7, 2006 7:40 AM
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.
Posted by: mikey | December 9, 2006 6:56 PM
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.
Posted by: Jason | December 19, 2006 11:37 PM
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.
Posted by: Sameer | December 21, 2006 6:38 AM
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.
Posted by: Carlos Rovira | January 3, 2007 7:23 AM
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.
Posted by: Carlos Rovira | January 3, 2007 7:40 AM
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
Posted by: Sameer | January 11, 2007 9:25 PM
hi
Posted by: Karen | January 25, 2007 10:11 AM
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.
Posted by: Tom Raic | February 22, 2007 3:19 PM
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.
Posted by: Tom Raic | February 22, 2007 3:21 PM
I noticed it works when I don't use parenthesis. Bug? I think so.
Posted by: Tom Raic | February 22, 2007 6:22 PM
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.
Posted by: Tom Raic | February 24, 2007 6:16 AM
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.
Posted by: Tom Raic | February 24, 2007 7:32 AM
Dear Peter
Having found your details on 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 regards
Sharon Pariente
Operations Manager
The Money Gaming Corporation Ltd.
Posted by: Sharon Pariente | February 26, 2007 4:03 AM
The change event doesnt work as usual , sometimes is not sended after we press a backspace
Somebody see this behaviour
Posted by: carlos arana | March 13, 2007 4:33 PM
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.
Posted by: BigVirgil | March 21, 2007 10:03 AM
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);
Posted by: Zach Brown | March 21, 2007 8:11 PM
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.
Posted by: Zach Brown | March 21, 2007 8:13 PM
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)
Posted by: Zach Brown | March 21, 2007 8:32 PM
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.
Posted by: Mark Thielman | April 13, 2007 10:41 AM
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
Posted by: Sameer | April 19, 2007 7:19 AM
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
Posted by: Sameer | May 16, 2007 12:08 AM
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)?
Posted by: max | June 29, 2007 7:16 AM
Have a look at the sample provided with the component -
http://examples.adobe.com/flex2/exchange/MaskedTextInput/Reservation/Reservation.html
The Journey Details tab uses a DateChooser component to populate the MaskedTextInput.
- Sameer
Posted by: Sameer | July 16, 2007 9:46 PM
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
Posted by: Paul | August 21, 2007 5:40 PM
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
Posted by: Paul | August 21, 2007 5:43 PM
Can you post the sample code so that we can get an idea about how you are using the component.
Thanks,
Sameer
Posted by: Sameer | August 28, 2007 1:30 AM
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
Posted by: Avon | August 31, 2007 6:20 AM
Hi,
Only monospaced or fixed-width fonts such as Courier, Lucida Console, etc. can be used with the MaskedTextInput component.
Thanks,
Sameer
Posted by: Sameer | September 10, 2007 12:52 AM
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
Posted by: Paul | September 23, 2007 7:30 AM
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
Posted by: Sameer | September 27, 2007 3:36 AM
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
Posted by: paul | September 28, 2007 2:01 PM
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.50
2.) $100,111.25
I 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
Posted by: Lars | October 10, 2007 12:01 AM
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
Posted by: Sameer | October 31, 2007 12:12 AM
Can I download the entire sample to look at it?
http://examples.adobe.com/flex2/exchange/MaskedTextInput/Reservation/Reservation.html
if so where? I'm missing this file "com\adobe\flex\extras\skins\MTISkin.as"
Posted by: Mike Azar | December 11, 2007 8:42 AM
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.
Posted by: Sameer | February 18, 2008 10:50 PM