Masked Input 1.3.1

January 21st, 2013 * Comments(13)

A long overdue release of my Masked Input Plugin is available. This is a bugfix release that adresses some of the bigger issues out there:

  • jQuery 1.9 compatibility.
  • Fixed browser lockup when window loses focus.
  • Android issues.
  • No longer preventing event bubbling.
  • Making sure we call completed handler when pasting a value.
  • Fixed bug trying to set caret on hidden elements.
  • Fixed cursor positioning bug related to bounds check.

You can see everything in detail over at the 1.3.1 milestone on github.

I had planned to roll in more bugfixes, but jQuery 1.9 releasing forced my hand a bit. :) If you see any problems, please report them as a github issue. I also managed to get this published in the newly revamped jQuery plugins site. Thank you to everyone who reported issues and to those who submitted patches.

 

  • Drew

    Might want to update the demo. Still getting crazy behavior on Android there: numbers typed later showing up before numbers typed previously.

  • http://digitalbush.com josh

    @Drew Thanks for the heads up. Fixed.

  • Fabiano Nalin

    Hi Josh,

    I would like to insert spaces beyond numbers.
    How do?

    Thank’s.

  • Iker

    Hi, thanks for your work, its great!!

    I need to write a formatted number, but i want to write by de right, if the mask is xxx,xy i want to write first the “y” character and then roll to the left.

    Where must i go to change it?

    Thanks

  • anahita

    I can’t get it to work in IE9. can someone else pls

  • Tarun

    I also can’t get it working on IE9.
    Its really killing me!

    I get the error:
    SCRIPT438: Object doesn’t support property or method ‘mask’

    My code looks something like this:
    $(‘input[name$="Date"]‘).mask(“99/99/9999″);

    jQuery Version:
    jquery-1.9.0.js

    Please help me out!

  • Rodrigo

    Hi! the code for mask is not work with jQuery 1.9.1

    A message display “jQuery is not definied”

    please, can help me?

  • wallie

    Fix problem IE.

    line 29: placeholder: ‘_’,

    change to:

    line 29: placeholder: ‘_’

  • Tarun

    @Wallie
    Thanks a TON Buddy! You saved my life and many hours of frustation!

  • Naomi Nosonovsky

    I am wondering is there a way to display the mask when entering data, but not save the mask characters? I am using the mask for phone numbers, but I do not want to save the mask characters in the database. I am using ASP.NET MVC. What is the best way to handle it?

  • Болеслав Малиновский

    Hi! That’s really great stuff you’ve written. Thank you!

    However, I’ve got some problem with the plugin.

    The reason was the following function:
    function checkVal(allow)

    My browser was set “0″ to the input somewhy on startup. (However, it could be also some other value). And further “test.charAt(pos)”, obviously generated error as “test” was interpred as number, so ‘test = input.val() + ” ‘ at the beginning solved the problem.

    All the best,
    Boleslav

  • Glenn

    Hey,

    I just want to say that this plugin has really helped me out. There was, however, one thing that messed with me. If I have my own blur event on the input box which also checks the input (for example to hide or display something on the page when the length is not 0), this implementation would not work anymore in some cases because my event was triggered before the plugin’s event, causing the length of the input value to be the length of the mask. (I.E. the mask was not yet removed from the input before my own event was triggered).

    In order to solve this I had to mess around with your plugin and add an “incomplete” event. I am not sure if I did it properly, but it is working, and I was wondering if this could maybe become a standard part of the plugin in the future? Here are my changes:

    line 83 (settings): Added “incomplete: null”
    line 320 (bind of blur.mask): changed to

    if (input.val() != focusText) {
    input.change();
    }
    if (input.val().length == 0 && settings.incomplete) {
    settings.incomplete.call(input);
    }

    Sincerely,

    Glenn

  • ed

    Hey Josh – great plugin. How would you have a page with say, 2-6 phone number fields added dynamically, where you need each of them to have a unique identifier to submit to a form?

    Just not sure if this plug-in offers that availability.

    Thanks.