Masked Input Plugin 1.3

March 27th, 2011 * Comments(24)

There is now a new version of my Masked Input Plugin for jQuery.  This is primarily a bugfix release. The biggest deal for me with this release has been the addition of a test suite.  In order to do so, I ended up writing a keystroke simulator which I call keymasher. It's not a perfect way to test, but it's better than nothing.

As a product of adding the tests, I found a few inconsistent issues with the delete and backspace handling which are now resolved. I was also able to take advantage of some event normalization that jQuery provides which didn't exist when I first wrote this plugin.  That plus a switch to UglifyJS has resulted in a smaller compressed file size (3.26KB for v1.3 vs 3.46KB for v1.2.2).

Bugfixes:

  • Fixed completed callback bug.
  • Fixed IE bug requiring charAt() instead of array notation to access char within string.
  • Fixed delete key handling with cursor at literal character.
  • Fixed infinite focus loop bug with multiple masked inputs on a page.
  • Fixed raw value returning mask placeholders when input empty.

Enhancements:

  • Now gracefully handle it when mask() gets called multiple times by calling unmask() on behalf of the user.

As always, if you have encounter any issues, please feel free to report them over on my github project. I'll do my best to  fix them in a timely manner. Also, if this plugin has helped you out, feel free to throw a few bucks my way by clicking the donate button at the top of the page.

  • http://andrewgunn.blogspot.com Andrew Gunn

    Why does the date mask allow you to enter an invalid date (e.g. 99/99/9999)? Surely it wouldn’t be hard to fix this or am I missing the point? I mean you could argue that checking the date is a realistic one should be part of validation, but checking whether an input conforms to a predefined template is also validation (kind of). They both prevent the user from submitted the form and being returned with a nice error ;) .

  • Babak

    Thank you for your fantastic job :)

  • http://digitalbush.com josh

    @Andrew, I’m not doing any kind of validation. 99/99/9999 just represents 8 digits worth of entry. Doing proper date validation is beyond the scope of the plugin. There are a lot of considerations to make, and are better handled via validation after the fact.

    Consider a non leap year. As the user is entering 02/29/____. I can’t know if the ’9′ is allowed until they have typed the full year.

  • http://andrewgunn.blogspot.com Andrew Gunn

    I kind of agree, but but I still think 99/99/9999 is an extreme that shouldn’t be allowed. We know how many months are in a year and the minimum/maximum number of days in any month. So the first digit for the day could be 0 or 1 and the maximum could be 1 to 9 (if the first digit is 0) or 0, 1 or 2 (if the first is 1). Similarly, the first digit for the month could be 0, 1, 2 or 3 and the maximum could be validated in a similar way. I do see your point regarding the leap year though :P .

    Does the plugin support different cultures out of the box or am I missing the point again?

  • http://buildstarted.com Ben

    @Andrew Gunn, the point is that validation should be done outside of this project using another library, for instance. One specifically suited to validating dates will do a much better job of validation than this project whose validation is only a side effect. Cultures would further complicate the issue by having alternate date formats making this project much more complex than it should be.

    Btw, Thanks for this project. I’ve used it in several different projects and it has been great.

  • http://in.linkedin.com/in/darshanshroff Darshan Shroff

    This is some really awesome work. I am using this plugin for the first time. And i am sure you are helping reduce turn around time for a lot of companies.

    I was directed from here
    http://stackoverflow.com/questions/4263334/insert-hyphen-automatically-while-typing-an-ssn-in-a-textbox-using-jquery

  • JohnDoe

    I’m concerned about one think. My mask definiton looks like this:

    ——————————
    $.mask.definitions['+']=’[.0987654321 ]‘;
    ——————————

    and now i want to set mask:

    ——————————
    $(“#element”).mask(“19.+++++”);
    ——————————

    But digit “9″ is constant, not a mask for digits. It is possible to do this?

  • CharleyZhong

    I used your plugin for SSN masking, and it remove the leading 0. For example, if I input it 012-34-5678, it shows as 123-45-678_.

    What is the issue please?

    Thanks.

  • Endrju

    Hi Josh, nice plugin! I found a bug – can you fix it soon, please?
    I have a mask “9?9″ on input field. When I insert only first digit and send the form. The value i get is a digit and separator – for example if I put number “8″ into input field I will get “8_” as a result. And it happen only when I submit form while i have focus on that filed.

  • http://www.wstudiographics.com Winchester

    Hello Josh,

    Your plugin is so easy to use. I will be using it on a lot of forms. Thank you.

    I have a time field that I’d like to apply it to. It works great for European time (23:59), but not so much for am/pm time. I tries using

    —–
    $(“#time”).mask(“99:99 am”);
    —–

    With this, the “a” will be replaced with an underscore and so the submitter can place am or pm.

    The problem though is that on 10:00, 11:00 and 12:00 will work. 1: to 9: won’t. I was thinking I could use the “?” to make it optional, but since it will have to be placed in front of everything it make the whole thing optional.

    Perhaps you could make it that what between 2 consecutive “?” marks to optional. May be you could use “{}” to contain the optionals. This way is the it could be used in multiple places on the script.

    —–
    $(“#time”).mask(“{9}9:99 am”);
    $(“#phone”).mask(“(999) 999-9999{ x99999}”);
    —–

    The next problem is that the submitter will be able to place wrong numbers in the time field.
    Like this: “57:78 pm” which is clearly wrong.

    May be it would be possible to make each number placement limited by the number set in the mask.

    —–
    $(“#time”).mask(“{1}9:59 am”);
    —–

    So, each number placed in the code represents the highest value that can be placed in the field space.

    Eg: “1 -> 0 to 1″ and “5 -> 0 to 5″ and so on.

    These are just the challenges that I’ve come across with the plugin and my thoughts on how I figure it could work. Otherwise, it’s a wonderful script and again, thank you very much for it.

    Best Regards,
    Winchester

  • padmavathy

    i need to enter the date in textbox… so i need some help from you like format which was enter by ourself… there is one format to enter so pls could you help me pls

  • kumarajesh

    Is it possible to write special character ‘a’ as a literal character.

  • rajesh01

    hi guys,
    there is a way to display character ‘a’ as literal character in masking using masked input plugin….pls help me ………………..
    thanks in advance.

  • Guest

    Thank you very much for the great plugin!

  • andrew

    I’m still getting the infinite focus loop bug in Chrome if I click in a masked field, click out of the browser, eg: notepad and click back into a different masked field.

  • xuqiang

    I have an input, does not limit the length, only enter numbers and letters. how to write inside the mask

  • drk

    Nice script! Only one problem: if I try to use it on a colorbox page it doesn’t show the previous field values so I can’t use it for EDIT functions, only ADD. Does anyone know how to make this work?

  • Pulkesh

    Hi
    I am using a masked input in my application for date, it is working properly but i am unable to validate if user enter month more than 12 and date more than 31.
    pls help me ASAP

    Pulkesh Talele

  • Giusepe

    I had a little problem when tried to use the mask plugin with jquery 1.7.1: “mask.split is not a function”.

    The solution was really simple, just make sure that you mask is a string before using .split.

    I changed the 2 places where you call

    mask.split(“”)

    for

    mask.toString().split(“”)

    Now seems to work perfectly. Great plugin :)

  • exoteeq

    I also use jquery 1.7.1 and came across this problem. My workaround was to change mask.split(“) to mask.mask.split(“), also the calls with mask.length must be changed to mask.mask.length.

    Hope it will be usefull for someone.

  • Simon

    How can I mask a telephone and force the first digit to be “9″?

  • Rey

    I came across your masked input plugin. It was exactly what I was looking for. Very nice job!!! If I were only as brilliant to come up with it.

  • Alan

    How would you suggest I handle date fields where instead of entering a date format matching the mask (4 year date) the user enters 2 digits

    I’d like to still keep what they entered but assign a default century so for example whereas if I enter 10/01/12 the mask discards this data, I’d like to keep it and update it to 10/01/2012

    Thanks

  • Gary

    Hi,

    This is perfect, but I’m just starting using Apex, and I know next to nothing about jquery.

    Here is the code I put in my page, before header:

    $(document).ready(function(){

    jQuery(function($){
    $(“#date”).mask(“99/99/9999″);
    $(“#phone”).mask(“(999) 999-9999″);
    $(“#tin”).mask(“99-9999999″);
    $(“#ssn”).mask(“999-99-9999″);});

    });

    Is this correct? If so, then how do I link, say the phone mask, to a text box on my page?

    I’ve tried things like class=”phone” in HTML Form Element Atributes, etc. nothing seems to work.

    Thanks for any help.