Masked Input Plugin 1.1.2

I just released version 1.1.2 of my Masked Input Plugin for jQuery. Felix Geisendörfer helped me mash out a few things with this release. He fixed the bug for Mac/Firefox with the backspace key and got me to open up the caret positioning functions. Thanks Felix!

Here are the changes for this release

  • Fixed a bug in Mac Firefox with backspacing.
  • Fixed a bug where delete at end of mask produced an extra placeholder character.
  • Exposed the caret positioning and retrieval methods as a jQuery function extension. You can now call $().caret() to get a caret position and $().caret(start [,end]) to set a caret position.

25 Comments so far

  1. Gevã @ November 30th, 2007

    Thank you. I never make a project without his plugin.

  2. dmendez @ December 12th, 2007

    keypressEvent returns false, this prevent onchange to be called (at least in FF).
    this code force onchange to be triggered.

    ….
    $(‘#’ + this.id).change();
    return false;

  3. David Mathers @ February 3rd, 2008

    Love the masked input plugin. I had a need to set an upper case mask, but it should let people type in lowercase and the upcase the letters for them, so this is what I did.

    Created an upcase charmap at line 65:

    ‘A’:”[A-Za-z]”

    Change the value of k before line 173 if the mask is ‘A’:

    if(mask.charAt(p) == ‘A’ && k>=97 && k<=122){
    k -= 32;
    }
    buffer[p]=String.fromCharCode(k);

    Thanks for creating the plugin!

  4. Mike Sidorov @ February 11th, 2008

    Great thing!

    But I’ve got two requests:
    1. to add an input type “numeric with separator” to accept ‘.’ and ‘,’ and covert them to any one of them;
    2. to add support fo function keys in FF – F5 to reload page etc.

  5. Andris @ February 13th, 2008

    How do i specify optional blocks of the mask, e.g. “ZIP + 4”?

    Example: /^\d{5}(-\d{4})?$/ = 33701-4313 or 55416

  6. flo @ February 14th, 2008

    Same thing here ! I’d like to have a mask to check currency values, it means something like 9999,99 € or 9.99 €. Do you have any idea about that ?

  7. finrik @ February 18th, 2008

    Is it possible to put the cursor on the begin of an input field, and not at the end? So the user can start edit the values without first deleting the old content? Thanks!

  8. tiago.bar @ February 21st, 2008

    Would be great if we could have an “modifier” for the mask to specify that mask applies to all chars of the input field. For a 50 chars length field it could be:

    $(“#name”).mask(“@a”);
    instead
    $(“#name”).mask(“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”);

  9. tiago.bar @ February 23rd, 2008

    To uppercase use a style in your input:
    text-transform: uppercase;

    To put the cursor on the beginning alter line 113 to:
    $(input[0]).caret(firstNonMaskPos);

  10. tiago.bar @ February 24th, 2008

    Humm… the text-transform style change only the display not the content 🙁

    I’m getting trouble with del and backspace keys. They don’t work properly. Anyone have this issue?

  11. moshe @ February 26th, 2008

    does this only work with release 1.1.2 of jquery?
    and do i need to download any more than the core jquery?

    using just the core of the latest release seems not to work for me

    thanks!

  12. emmanuel @ June 2nd, 2008

    I also need a way to use mask on currency fields,
    My field is like :
    R$ 999.999.9 …. 99,99
    The length of chars in this case is unlimited
    do u have any idea about how am I going to make that ?

    Thanks in advance

  13. jose @ June 24th, 2008

    For those looking for a mask on currency fields, I found an example on the following page
    http://inovaideia.com.br/maskInputMoney/

  14. milan kalinic @ July 2nd, 2008

    Hello, very nice plugin, but needs a few tweaks to make it perfect.

    Make distinction by (for required):
    “text” > “T” (all w/o numbers)
    “numeric” > “N” (numbers)
    “all” > “A” (all)

    and for NOT REQUIRED small caps:
    “text” > “t”
    “numeric” > “n”
    “all” > “a”

    * it is very very important that TEXT (T or t) is ALL BUT NUMBERS, so that the plugin could be used in many languages without any problems (all non A-Z: “{}[]!”#$%&/()=?*ŠĐŽČĆ” CAN BE USED FREELY if “T” or “t” is chosen). Users can define their own sets, but this should be standard.

    IE.
    AAA (NNN) TTTttt

    First three A’s are capitalized, which means they are required, all allowed. In the “()” N’s are capitalized which also means they are required and numbers only. Then we have “TTTttt”, first three are ALL BUT NUMBERS (text characters no matter which language or “{}[]” is ok) and are required, second three are not required.

    If you manage to tweak plugin to do this, it will be jaw dropping!!!

    Great idea, that’s for sure.

    Hope you’ll make the changes, and use 100% of the plugin’s potential.

  15. cL0h @ September 25th, 2008

    This plugin rules. Thanks a million!!!!!
    I had a really good look at doing the optional/required thing but it cannot work when you are checking each keypress.
    i.e. check inputchar(i) against maskchar(i)
    You would need to match the whole thing against a RegExp at the end.

  16. jason @ September 25th, 2008

    How much do you offer for completing your suggestion ? milan kalinic.
    Where’s your attempt at this work?
    Let me guess. You are a manager and not even a coder?

  17. bela @ September 26th, 2008

    I think it is very cool!

  18. s @ October 26th, 2008

    Does this work in Netscape? – Somehow it erases the previous character in netscape. Works like a charm in other browsers.

    Also, how do i get the unmasked value for simple validations if i need?

    Thanks a million
    s

  19. COME ON @ May 15th, 2009

    What happened to currency support?

    You need to shift from right, and have a flag either to pad from decimal (always expect decimal) or wait for . to trigger to decimal.

    Come on, seriously – add support for right padding and that should be enough (and literals in the format, and a ‘.’ trigger flag)

  20. Vinayak @ February 17th, 2010

    In version 1.1.2, I required a method of considering upper and lower case letters like @David (Comment on Feb. 3, 2008). I achieved it using the following steps:

    1. Change $.mask.definitions (default definitions) to:

    ‘a’: “[a-z]”,
    ‘A’: “[A-Z]”

    (currently line 15)

    2. Add setting for supporting transformation:

    settings = $.extend({ placeholder: “_”, transform: true, completed: null }, settings);

    (currently line 61)

    3. Transform keypress character based on settings:

    if (settings.transform) {
    if (tests[p] == ‘/[A-Z]/’) c = c.toUpperCase();
    if (tests[p] == ‘/[a-z]/’) c = c.toLowerCase();
    }

    (currently after line 162: var c = String.fromCharCode(k);)

    Josh, not sure if this is the right way, but any comments would be helpful.

  21. John Doe @ February 20th, 2010

    Just like “COME ON” said in his comment on May 15th, 2009; a decent currency support would be extremely appreciated! Anyone capable of adding the plugins functionality with right padding and dot for decimal trigger?

    The currency formatter supplied earlier (http://inovaideia.com.br/maskInputMoney/) is really poor. I really like this input mask plugin, I’ve been using it for years now. But currency support is indeed a big desire!

  22. Stephen Stanley @ July 15th, 2010

    I think this is a great extension for jQuery that I will use on all of my projects. My only complaint is handling currency…

    .mask(“$?999,999,999,999”)

    When you input 80000 the result is $800,00

    Same issue with percentages…

    .mask(“%?999.99”)

    When you input 80.00 the result is 800.0

    Other than that, this plugin is really amazing. Thanks for all of the work you put into it! 🙂

  23. Caue Rego @ March 14th, 2011

    Here’s two simpler ways to force uppercase with no need to use the masked plugin:

    $(“selector”).keypress(function(event){
    $(this).val($(this).val().toUpperCase());
    });

    and / or:

    $(“selector”).css(“text-transform”, “uppercase”);

  24. mike welker @ March 22nd, 2012

    Is there any update for the currency mask function?

    example:
    .mask(“$?999,999,999,999″)

    When you input 80000 the result is $800,00

    I tried using the library from digitalbush “maskMoney” but it seems to render the maskedInput libray useless.

    Thank you.

    Mike

  25. Guessous @ September 9th, 2015

    jQuery(‘.risqueat’).mask(‘999SS’, {

    ‘translation’: {

    S: {pattern: /[a-zA-Z]/},

    9: {pattern: /[0-9]/}

    } ,onKeyPress: function (value, event) {

    event.currentTarget.value = value.toUpperCase();

    }

    });

Leave a reply