SubscribeMasked Input Plugin 1.2.1
December 22nd, 2008 
Comments(17)
Comments(17) There is now a new version of my Masked Input Plugin for jQuery. Version 1.2.1 moves one step closer to my bigger picture for the plugin. I had to make a few breaking changes to do so, but I feel that the end result is worth it. This release adds a lot more polish to the 1.2 release. Here's what we've got.
- BREAKING CHANGE: Removed deprecated $.mask.addPlaceholder method. Use the "$.mask.definitions['']="";" syntax instead. I said I was going to do this on the last release and now seems just as good a time as any.
- BREAKING CHANGE: Removed "allowPartial" option in favor of new mask syntax I'll describe below. A discussion and code exchange with Michael Bray inspired this change. I hate that it's a breaking change, but the new way makes a lot more sense.
- New mask syntax option '?'. Anything listed after '?' within the mask is considered optional user input. The common example for this is phone number + optional extension. The new syntax will look like this: "(999) 999-9999? x99999"
- I got rid of the awkward input behavior where users typed over top of existing input. The plugin acted like a word processor Insert mode. This has always agrivated me, so now the input shifts on input and backspace/delete.
- Now calling .change() on blur if the value has changed since the plugin prevents the change event from being fired naturally.
- Pasting incomplete test no longer wipes the input. Instead, the cursor is just placed where the input leaves off.
- Fixed backspace detection for iPhone. Plugin is now iPhone compatible.
- Fixed pasting bug when mask starts with a literal and caret position is on the literal character.
I feel really good about this release. I made some changes that I feel are good for the direction of the plugin. Iif you don't like some of the changes please let me know and I'll look at adding them back in as options. I'm trying hard not to bloat things up, but I don't want to remove features that are needed.
Great plugin! It’s the easiest way to make mask I ever tried. Thanks for sharing it!
I have just a little question: how can I make it work with money values?
I mean: I want to make something like $(“#field”).mask(“999,999.99″)
but it can’t adapt to larger values and the user MUST type all numbers, for small values.
A ‘?’ syntax with a little bit of regex can solve my problem? I just couldn’t figure it out yet…
I must echo Rodrigo, this is a great plugin and it is way superior to using the AJAX Control Toolkit (which I was previously using).
The addition of the mask.definitions is absolutely perfect for me as I need to accept Hexadecimal valid characters.
However I did notice that if you focus the control and then exit the control without entering anything the mask is still displayed. (I seem to think this wasn’t the case with v1.1.4)…
Sorry, ignore that about the mask still being displayed…just me and the whole issues with $ syntax!!!
‘just wanted to comment and say I really like the changes in the latest release.
I especially appreciate that you fixed the change event issue.
keep up the good work-
I like the “?” indicating the “optional after” – so why not take it one step further and have another character indicating “optional BEFORE”? That way you could do monetary fields.
For example if your key character was the pipe:
mask(“999,999,99|9.99″)
that way something like just 1.00 could be entered and still be valid? and also larger numbers too?
regardless, great plugin-
thanks-
In crunch mode on a project right now but when i get more time I’m going to provide decent feedback on this because it has been a great help to me.
The only niggle I have is the new mask syntax option ‘?’. I have that designated as “[A-Za-z0-9]” in my charMap.
I’d guess others may do too.
Also kenneth and Rodrigos comments basically refer to the same thing. That is masked decimal entries where input length varies but always ends in “.99″
I tried adding this myself but it’s fiendishly difficult.
It is a dream feature and would be awesome to have.
I love your plugin… thanks! I have one question… when trying to change the mask on a field (to adjust for example the CW code from a credit card where AmEx is 4 numbers, all others are 3). How do I clear it? When you redefine the mask it causes the mask to break.
$(‘#card_type’).change(function(){
$(‘#cw_code’).val(“”);
if($(‘#card_type’).val() == “AmEx”) {
$(“#cw_code”).mask(“9999″);
} else {
$(“#cw_code”).mask(“999″);
}
});
Thanks!
How can I prevent the clearing of the masked input if mask filling is not complete and blur event was fired?
Nice plugin, and very practical!
There is a strange behavior though! If, lets say, the mask would be “999-999-9999″, and input becomes filled with “___-___-____”, hitting the Enter Key while caret is in that field, does not validate, and submits form to the server with the “___-___-____” value. Can this be fixed?
My suggestion was to extend use of mask() method with another parameter like ‘completed’ is, which could be another callback function.
Hello i like validate only numbers but of 3 or 5 caracters?
thanks
I’ve noticed that if an input element is readonly, applying a mask somehow changes that? Not to say it actually changes/removes the readonly=’readonly’ attribute (because it still seems to be there) – but the field is editable all-of-a-sudden?
Is this intentional? If so, is there a fix/workaround?
Thanks!
I think I have a quick/dirty workaround so that the mask doesn’t mess with readonly input’s edit-ability (but still applies the mask look/style).
At the bottom of the 1.2.1 js file, I simply wrapped the bindings for the keydown and keypress events in an if-readonly check like this:
if (!input.attr(“readonly”)) {
input
.bind(“keydown.mask”, keydownEvent)
.bind(“keypress.mask”, keypressEvent);
}
so far so good-
Kenneth
How can I mask hour? Is regex supported?
For example: 23:00 is valid, but 25:00 isn’t. The 2nd digit depends on the first.
Thanks.
@Brian Tafoya
You need to call the unmask function before resetting the mask.
$(‘.creditCard’).mask(’9999-9999-9999-9999′)
$(‘.creditCard’).unmask()
$(‘.creditCard’).mask(’9999-9999-9999′)
I am making a phone field for a form. There is only one field originally but the user has the ability to add fields on the fly. What I currently have is
function maskPhone(){
$(‘.phone’).mask(“(999)999-9999″);
};
which masks the phone for the most current field. This function gets called when the body loads and every time a new phone field gets inserted. If I add a new phone field I mess up the first field and makes it impossible to edit. Does this plugin have a problem with adding input fields like this or am I doing this the wrong way.
Hello, how i can release option part in phone mask like (?99999)999999 (code of city can be 3 or 5 numbers).
thx