Masked Input Plugin 1.0

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.

12 Comments so far

  1. Cidral @ August 9th, 2007

    Really, really neat mask implementation! Thanks for sharing it!

  2. Felix Geisendörfer @ August 11th, 2007

    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.

  3. paris @ August 14th, 2007

    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!!

  4. Dino @ August 19th, 2007

    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!

  5. Pedro @ August 21st, 2007

    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);

  6. Justin @ August 29th, 2007

    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!

  7. Robert @ September 6th, 2007

    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.

  8. Sergi @ September 12th, 2007

    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)))

  9. Mike @ September 18th, 2007

    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.

  10. Christian Ready @ September 20th, 2007

    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?

  11. Sunil Kumar @ January 22nd, 2008

    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?

  12. Geoff @ February 3rd, 2009

    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!

Leave a reply