SubscribeMasked Input Plugin 1.0
July 25th, 2007 
Comments(12)
Comments(12) I finally made it to 1.0! This release doesn't add anything new other than a few minor cosmetic code changes.
So, without further adieu, I present my Masked Input Plugin.
digitalBush
Tales of a Tormented Software Developer
Really, really neat mask implementation! Thanks for sharing it!
I love this plugin. However it seems like handling the backspace key on Mac OS X is all messed up : /. I’ll try and see if I can come up with a patch for it, but if you have any idea on what might be causing this I’d be glad to hear it.
great work thats a realy usefull plugin! is there any way to get real date validation with this? im mean if i enter 2007/12/3* the last number only can be 0 or 1.
if i enter 2007/12/2* the last number can be 0 till 9. this would be great!!
Great job!
the removeRow has a bug, however. In Firefox, at least.
If you try to removeRow(0) when you have only one row inserted, the grid columns are messed up!
I missed an “unmask” method, and since I’m using your code, here follows my changes:
243c243,244
};
> this._checkVal = checkVal; // allows later removing
246c247,257
$.fn.unmask = function() {
> this.unbind();
> var el = this.get(0);
> if ($.browser.msie) {
> el.onpaste = null;
> } else if ($.browser.mozilla) {
> el.removeEventListener(‘input’, el._checkVal, false);
> }
> el._checkVal = null;
> };
> })(jQuery);
I love the idea behind this plugin except my only question is why is it so hard to find a plugin that does validation + masked input? If you were to add validation this would be a killer plugin!
I love it. Amazing and simple. More simple than any other masked plugin that I’ve seen. On another note, it might not work with the newest version of Netscape. I have it running on our checkout page at https://www.cablesforless.com/ – if you like to see it in action add something to you cart and click checkout.
Hi! Your plugin is very good but it has one disadvatage. There are no user-defined validation. I think it will be nice
to add to argument settings field ‘validate’, that like a ‘completed’ will represent a function returning boolean value and use it in checkVal like this
if(!s.match(re) || (settings.validate && !settings.validate(input)))
Great plugin… just one question. How does the “completed” option work? I would like to alter the functionality so that if a field is incomplete, it doesn’t erase everything in the field. Thanks.
I love your plugin. Very well done! I am using to format phone numbers and I wanted to know if there was a way to optionally allow for extensions. In other words, a user could enter this:
555-555-5555
but continue if he wanted to to enter this;
555-555-5555 x5555
Any ideas?
Good work with the plugin! I’ve the same requirement as above where the user can enter a zip code with format 99999 or 99999-9999. Is there an either or option?
John,
Terrific job on this awesome and helpful jQuery plugin. It works great. I’m wondering if there’s a better way to allow 15 OR 16 digits… for a single credit card field.
For the benefit of future readers, AmEx cards have 15 digits, while Visa, MasterCard and Discover have 16. What I’ve done is tweaked the code provided here, as well as add some other JavaScript that checks the card type and if it is AmEx then switches the mask applied to the field. Here’s how I did it:
First, add (to your masking code):
$(“#card_number”).mask(‘xxxxxxxxxxxxxxxx’);
Then add (to var charMap, around line 65 of jquery.maskedinput-1.1.4.js):
‘x’:”[0-9\\u2666]”
These two mods allow you to use numbers OR the Unicode Diamond Character in your mask… for obscuring the CC# onblur. I have another JS that performs a simple string.length and substring on the card number to change the first 12 chars to a diamond and store the real number in a hidden field.
So, now we have to change the mask on the fly to 15 chars if the user wants to use an AmEx card. Here’s where it would be helfpul to have OR syntax in the Regex… like [x]{15,16}?? I can’t figure out how to put an OR in the mask.
Anyway, here’s the code that I found works (on FF3,Opera9,Win, but not Safari or Chrome).
Add this after your jQuery includes and other JavaScripts in the head.
function pickAmex()
{
jQuery.noConflict();(function($) {
$(function() {
$(“#card_number”).unmask();
$(“#card_number”).mask(‘xxxxxxxxxxxxxxx’);
});
})(jQuery);
}
function pickNotAmex()
{
jQuery.noConflict();(function($) {
$(function() {
$(“#card_number”).unmask();
$(“#card_number”).mask(‘xxxxxxxxxxxxxxxx’);
});
})(jQuery);
}
You then put: onfocus=”pickAmex()” on the AmEx radio button, and onfocus=”pickNotAmex()” on the Visa, MC & Discover buttons. Presto, the mask changes on the fly to 15 characters or 16 characters, respectively.
If there’s a better way to do this with better browser support, I’m all ears!