Masked Input 1.3.1

January 21st, 2013 spacer Comments(23)

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. spacer 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.

  • 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.

  • Jean-Sébastien Proulx

    There seems to be a bug on Android phones. I can’t type anything in masked input ( https://www.ms1inscription.com/reserver/demimarathonvdssoct2013/2 )

  • Mr B

    Is it possible to have blank placeholders? I would like to present a 3 digit country code but some may not have 3 digits and I don’t want them to have to enter 0′s in the “blank” spaces.

  • Rafael d’Ávila

    hey, have bug in version 1.3.1

    $.mask = {
    //Predefined character definitions
    definitions: {
    ’9′: “[0-9]“,
    ‘a’: “[A-Za-z]“,
    ‘*’: “[A-Za-z0-9]”
    },
    dataName: “rawMaskFn”,
    placeholder: ‘_’,
    };

    after “placeholder: ‘_’” NO HAVE “,”

    not work in IE.

  • Domenico Zanella

    I patched your plugin v1.3.1 to have uppercase and lowercase functionality at output level.

    I added an “outputCase” setting
    It could be: ‘upper’, ‘lower’ or null

    i added a new line in “definitions” after “placeholder”:
    [...]
    placeholder: ‘_’,
    outputCase: null // ‘upper’, ‘lower’, null <— NEW LINE
    [...]

    i added a new line in the "extend" call:
    [...]
    settings = $.extend({
    placeholder: $.mask.placeholder, // Load default placeholder
    outputCase: $.mask.outputCase, <— NEW LINE
    completed: null
    }, settings);
    [...]

    Finally i changed the writeBuffer() function this way:

    function writeBuffer() {
    switch (settings.outputCase) {
    case 'upper':
    input.val(buffer.join('').toUpperCase());
    break;
    case 'lower':
    input.val(buffer.join('').toLowerCase());
    break;
    default:
    input.val(buffer.join(''));
    }
    }

    Under "definitions" i have this: 'a' : [a-zA-Z]
    My mask is: 'aaaaaa'
    With this patch i can type uppercase or lowercase letters, but in the form filed i have only uppercase or lowercase letters, depending on the choice made with outputCase

    I dont know if i modified the code in the right places, but it is working spacer
    thanks a lot for your plugin
    –dz

  • ziba amri

    if clear “,” in plugin mask version 1.3.1 (in “placeholder: ‘_’ ” line) , your problem will solve:

    $.mask = {
    //Predefined character definitions
    definitions: {
    ’9′: “[0-9]“,
    ‘a’: “[A-Za-z]“,
    ‘*’: “[A-Za-z0-9]”
    },
    dataName: “rawMaskFn”,
    placeholder: ‘_’, <————————————— "," is wrong(clear "'")
    };

  • Aleem

    Anyone found a fix for the above mentioned issue on Android Chrome???

  • Beri Bener

    Does not work in Android phones. (tested with samsung galaxy phone) Can not type in masked input textboxes as previously mentioned. Great plugin and looking forward to have your next update addressing this issue! Thanks…

  • John Newman

    Hello

    I see it says “drop IE7″ in the changelog – which is fine. The 1.3.1 version fails to parse in IE7 completely, only due to a trailing comma:

    dataName: “rawMaskFn”,
    - placeholder: ‘_’,
    + placeholder: ‘_’
    };

    If you remove that comma, IE7 seems to work fine again. Why not apply that fix into the next release? Yes I know it’s a dying browser, and that IS valid syntax, but to me it’s poor form – and the more browsers you can support the better. Yes?

  • cgg

    Is the bug on samsung galaxy s4 fixed now or not yet??

  • Joe Mallory

    I’m adding a base sample for this and it fails in ALL IEs and Android

    jsfiddle.net/ra542/76/

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.