Masked Input Plugin 1.2.2

There is now a new version of my Masked Input Plugin for jQuery.  This is primarily a bugfix release which addresses some edge cases.  Additionaly, I made a few changes that I feel make the plugin behave more natural so that the user experience isn't affected too much by using the plugin.
A few other things worth noting:  This is my first build for this plugin that uses a build script.  No longer am I compressing the javascript by hand.  I'm hoping to extend the script further so that future releases are easier.  Also, I'm now compressing the script with YUI Compressor.
This release has been tested with jQuery 1.3.2 and 1.2.6.
Bugfixes
  • Fixed bug which blocked apple meta key.  This was keeping copy and paste via keyboard shortcut from working on Mac.
  • Fixed bug that caused mask literals to be pushed into the mask placeholder positions when verifying the data.
  • Fixed bug that prevented user input from completing when mask ended in mask literal.

Changes

  • Changed behavior on focus to select all text if focusing on a completed mask.
  • No more masking on readonly inputs.
  • Changed escape behavior to put the input back to the original value instead of just blanking the text.
  • Increased range of accepted characters for input.
  • brett

    Hi,

    how do you enforce a number format such as:

    +61 XXXX XXXX

    Many thanks. Also did you get my email regarding enforcing capitalization? Is this possible?

  • http://jonerickson.me/ Jon Erickson

    Really sweet that you were able to add the select all as default functionality. =)

    I was the one with the SO post (http://stackoverflow.com/questions/480979/jquery-masked-input-plugin-select-all-content-when-textbox-receives-focus)

  • http://lgcarrier.blogspot.com Louis-Guillaume Carrier-Bédard

    Hi Josh,

    Thanks for the plugin.

  • Steve

    Hi,

    Great plug-in.

    I see in 1.2.2 that the bug:
    Fixed bug that caused mask literals to be pushed into the mask placeholder positions when verifying the data.

    should be fixed. Unfortunately this appears to still exist.

    I’m trying to enforce a phone number format of 44 9999 999999 but after validation the field holds 44 4499 999999 which is obviously wrong!

    Also, is it possible to have a more flexible mask. Ideally I’d like to be able to specify that the last character (or more) in an input field can be left blank. For e.g. If the mask was a99 99aa then I’d like the user to be able to input something like z12 34z or z12 34yz.

    email me for more information if required.

    Many thanks for the plugin.

  • http://www.daffny.com Radioman

    “completed” function ceased to work

  • morleydots

    Hello,

    Here is a kind of a bug.
    I have a several masks for one input field. Mask changes depending on value of some other input field. So if you tring to change mask without page reloading there is a stange behavior appears () while you trying to enter some data into this inputs.

    It’s hard to explain for me, here is an example: http://morleydots.jamshoot.ru/share/maskedinput/

    Try to play with select field and then try to enter some data in the input.

  • Rike

    Hi all,

    I have the same bug when trying to use “completed” function (v1.2.2). I tried to debug the library with Firebug, and I’m able to fix this issue by modifying the code of ‘seekNext’ function:

    function seekNext(pos) {
    while (++pos < len && !tests[pos]);
    return pos;
    };

    The difference is “less than “instead of “less or equal”. I’m not sure, it is a good fix (I’m not a Javascrip geek !).

    Josh, please could you confirm this fix ?

  • Rike

    Sorry I forgot:

    Great library, very useful !
    Thanks a lot.

  • Rike

    An improvement proposal:

    Add a settings attribut “allowIncompleteValue” (true/false), and then call ‘checkVal’ function with this setting !

    It will able to define a mask without forcing the end user to loss his value if he don’t complete the field.

    (sorry for my english: hope you will understand what i mean)

  • http://www.daffny.com Radioman

    2morleydots:
    before apply new mask you should unmask previous

  • http://achildseyes.com Eric Crull

    I’ve seen some requests for the ability to suggest or partially suggest input to the user, which I have added in to the previous version of your plugin.
    You could add:
    $(“.timeStamp”).mask(“99:99″,{suggested:”0″, backspace:”suggested”} );
    would show 0_:__, since 75% of all times would start with a zero.
    I also made it accept a sparse array to suggest at the end of the field:
    $(“PD”).mask(“99.9″, {suggested:[,,,"0"]})
    would show __.0 but would allow the 0 to be changed when that character is highlighted.
    The changes are minimal and are very effective for repetitive entry. I’d like to email you a sample html file.
    I’ve been using it (IE6 and IE7) for about 6 months and it works very well for us.
    Thanks,

    Eric

  • nathaniel

    OK, so I’m using 1.2.2 within ASP.Net. It works for masking, but if the mask definition is larger than the information within the textbox, it errors out.

    Let’s say I want to only have 5 alpha characters for some type of shorthand for an entity.

    $(".filteredname").mask("*****", { placeholder: " " });

    and in the codebehind I do:

    txtEntity.Text = “123″;

    then the mask wipes out the code. However, if I do:

    txtEntity.Text = “123456″;

    then the data displayed is “12345″, even though the “Value” of txtEntity is “123456″.

    So, weirdness. If the data is smaller than the length of the mask, it gets cleared, but if it’s larger, it gets shortened.

  • Otto

    How can I mask hour? Is regex supported?
    For example: 23:00 is valid, but 25:00 isn’t. The 2nd digit depends on the first.

    Thanks.

  • Soup

    What am I doing wrong? I’ve specified a mask of “99″ to allow input of up to two digits. It works for values 10 to 99 but not for anything less that 10 unless there is a leading zero.

    Why can’t I just be able to enter a single digit from 0 to 9?

    BTW, thanks for your efforts on making a nice plugin.

  • http://www.thekmz.co.uk Romyn

    Hi Josh,

    Thanks – nice plugin.

    Echo what Otto mentioned – would be really useful if it could do times well. I currently have 99:99:99 but would be really handy to have 23:59:59 where the 23 part is a combined 2-digit. I would try and do this myself but being a bit of a js newbie I suspect it’s beyond me.

    Can’t have everything I suppose and some of us are just greedy – but if you ever fancy adding that I’m sure I wouldn’t be the only one to appreciate it – impending fatherhood allowing ;)

    Either way thanks again for your efforts.

    Kindest regards
    Romyn

  • Marcel

    Hi, i’m getting some memory leak on page reload with masked input, when i do this: $(‘#field’).mask(’99999-99′)

    Can you help me?

    Thnak you.

  • Zito

    I have some problems if “completed” parameter.
    Debugging the plugin i found a way to fix the problem and a want to share.

    In the line 169
    if (settings.completed && next == len+)

    I made a change
    if (settings.completed && next == (len+1))

  • Zito

    Correction.

    The original line 169
    In the line 169

    if (settings.completed && next == len)

    without the last “+”

  • Livia

    Hi,

    I’m trying to unmask a value before submit, but it’s not working.
    Can someone help me?

    My code:
    $(document).ready(function() {
    $(“#cadastroCliente”).validate({
    rules: {
    cep: {
    rangelength: [8,9]
    },
    cpf: {
    rangelength: [11,14]
    }
    },
    submitHandler: function(form) {

    $(“#cep”).unmask();
    $(“#cpf”).unmask();
    form.submit();
    }
    });

    $(“#cep”).mask(“99999-999″);
    $(“#cpf”).mask(“999.999.999-99″);
    });

  • Marcel

    Hi, the sIEve Leak Detector is reporting a memory leak on page with masked input, when i do this: $(’#field’).mask(’99999-99′)

    Can you help me?

    Thnak you.

  • Chris M

    Hi,

    Great control however, I am having a problem with the ‘completed’ setting. I have the latest version of the control and I have copied your example but my alert never appears. Am I correct to think as soon as a correct value is entered into the text box the completed function should fire?

    Any help would be great.

    Thanks

  • Paul S

    Has worked stopped on this plugin? We have seen the same problem as Soup with the mask not working unless the value is exactly the same length as the mask. We would love to use this plugin.

  • surama hotta

    Hi,
    I used this Masked Input individually (simple textbox), its works fine, but when I use both Watermark and this Masked Input, then first time the controls works fine and we can enter data, but when I change the focus from this controls without giving any data and again back to this control then it not entering data in proper format.

    Can anybody please help me.
    How to use both Watermark with Masked Input.

    Thanks,
    Surama

  • Kevin

    What is the proper config to mask a US dollar amount:

    .50
    1.50
    10.50
    900.50
    1,900.25
    25,000.00
    250,000.00

    etc., basically want to allow any valid US dollar amount. How?

    Thanks!!

  • http://jukah.com Justin

    Hey, great plugin!

    I’m also wondering about about dollar values – any way to set a maximum mask ($99999.99) but accept fewer characters? ($99.99)

    Thanks!

  • Ofélia

    Hi Someone can help me !!

    I have a textbox with

    var Formatfield =”9999-999 ****************************************”;
    jQuery(“#filed”).mask(Formatfield);

    If the user want not complete the mask, the part * it’s free .

    thanks in advanced !!
    Ofélia

  • http://www.sudheer.webs.com Sree

    can i use both watermark & Masked plugin at a time if yes how can i use it.

    i tried to fix my own function in plugin but it was working in normal aspx but its not working on “Master & Content page”

    Please sort it out

  • http://www.nette.com.tr ahmet ertaş

    for “default value” problem resolve is:

    (function(a){var c=(a.browser.msie?”paste”:”input”)+”.mask”;var b=(window.orientation!=undefined);a.mask={definitions:{“9″:”[0-9]“,a:”[A-Za-z]“,”*”:”[A-Za-z0-9]“}};a.fn.extend({caret:function(e,f){if(this.length==0){return}if(typeof e==”number”){f=(typeof f==”number”)?f:e;return this.each(function(){if(this.setSelectionRange){this.focus();this.setSelectionRange(e,f)}else{if(this.createTextRange){var g=this.createTextRange();g.collapse(true);g.moveEnd(“character”,f);g.moveStart(“character”,e);g.select()}}})}else{if(this[0].setSelectionRange){e=this[0].selectionStart;f=this[0].selectionEnd}else{if(document.selection&&document.selection.createRange){var d=document.selection.createRange();e=0-d.duplicate().moveStart(“character”,-100000);f=e+d.text.length}}return{begin:e,end:f}}},unmask:function(){return this.trigger(“unmask”)},mask:function(j,d){if(!j&&this.length>0){var f=a(this[0]);var g=f.data(“tests”);return a.map(f.data(“buffer”),function(l,m){return g[m]?l:null}).join(“”)}d=a.extend({placeholder:”_”,completed:null},d);var k=a.mask.definitions;var g=[];var e=j.length;var i=null;var h=j.length;a.each(j.split(“”),function(m,l){if(l==”?”){h–;e=m}else{if(k[l]){g.push(new RegExp(k[l]));if(i==null){i=g.length-1}}else{g.push(null)}}});return this.each(function(){var ORJ=$(this).val();var r=a(this);var m=a.map(j.split(“”),function(x,y){if(x!=”?”){return k[x]?d.placeholder:x}});var n=false;var q=r.val();r.data(“buffer”,m).data(“tests”,g);function v(x){while(++x=0){}for(var y=x;y<h;y++){if(g[y]){m[y]=d.placeholder;var z=v(y);if(z<h&&g[y].test(m[z])){m[y]=m[z]}else{break}}}s();r.caret(Math.max(i,x))}function u(y){for(var A=y,z=d.placeholder;A<h;A++){if(g[A]){var B=v(A);var x=m[A];m[A]=z;if(B<h&&g[B].test(x)){z=x}else{break}}}}function l(y){var x=a(this).caret();var z=y.keyCode;n=(z16&&z32&&z=32&&C186){var x=v(z.begin-1);if(x<h){var A=String.fromCharCode(C);if(g[x].test(A)){u(x);m[x]=A;s();var y=v(x);a(this).caret(y);if(d.completed&&y==h){d.completed.call(r)}}}}}return false}function w(x,y){for(var z=x;z<y&&z<h;z++){if(g[z]){m[z]=d.placeholder}}}function s(){return r.val(m.join("")).val()}function p(y){var z=r.val();var C=-1;for(var B=0,x=0;B<h;B++){if(g[B]){m[B]=d.placeholder;while(x++z.length){break}}else{if(m[B]==z[x]&&B!=e){x++;C=B}}}if(!y&&C+1=e){s();if(!y){r.val(r.val().substring(0,C+1))}}}return(e?B:i)}if(!r.attr(“readonly”)){r.one(“unmask”,function(){r.unbind(“.mask”).removeData(“buffer”).removeData(“tests”)}).bind(“focus.mask”,function(){q=r.val();var x=p();s();setTimeout(function(){if(x==j.length){r.caret(0,x)}else{r.caret(x)}},0)}).bind(“blur.mask”,function(){p();if(r.val()!=q){r.change()}}).bind(“keydown.mask”,l).bind(“keypress.mask”,o).bind(c,function(){setTimeout(function(){r.caret(p(true))},0)})}p()})}})})(jQuery);

  • gorpacrate

    if your ‘completed’ function doesn’t work, try to replace this line:

    if (settings.completed && next == len)

    (this is line number 169 of noncompressed plugin) with that:

    if (settings.completed && eval(+next – 1) == len)

    While using this plugin with firebug, i’ve noticed, that ‘next’ variable jumps up over a symbol when last char of mask entered. This way should work.

  • Oliver Lillie

    Just wondering. Is it possible to mask anything else aside numbers. For example an email or url?

  • Chuck

    Why does calling .mask() on an empty masked input field cause the field to be filled with the prompt character? This is causing me some problems trying to save the contents of a field without the mask literals.

  • Andreas Buchholz

    Concerning the bug with repeated mask characters that was removed in version 1.1.4:

    I guess, it was reintroduced while implementing the acceptance of incomplete inputs by using a ‘?’. For me it is working fine now after applying the following modifications:

    Change line 190 from
    for (var i = 0, pos = 0; i < len; i++) {
    to
    for (var i = 0, pos = firstNonMaskPos; i < len; i++) {

    Also line 197 from
    lastMatch = i;
    to
    lastMatch = firstNonMaskPos;

    Also lines 204 and 205 from
    pos++;
    lastMatch = i;
    to
    lastMatch = firstNonMaskPos;
    pos++;

    Maybe it can help anyone out there.

    Andreas

  • Keith

    Is it possible to right justify the input. Like a mask of 99:99:99 that if you type 12 becomes __:__:12 or 1234 becomes __:12:34 and 123456 becomes 12:34:56. Think hours, minutes, seconds.

    Any thoughts?

    Keith

  • http://www.peterbarney.com/ Peter

    I had a problem where masked input plugin is blanking out or emptying fields that aren’t completed.

    For example, if I have a zip code input mask of 99999-9999, and the user enters a 5-digit zip code, the field goes blank after the user leaves the field.

    It is extremely not obvious from the demo page, but adding a question mark (?) into the field allows you to keep those characters. The mask that works is as follows:

    99999?-9999

    Thanks for a great plugin.

  • http://www.joshpadnick.com Josh Padnick

    Overall, great plugin! I encountered a frustrating bug where calling mask() on the same input field multiple times started causing strange behavior. While I believe this constitutes a genuine bug in the plugin, I found a nice workaround.

    Just call unmask() right before you call mask() again. You can execute the sequence as many times as you want and the behavior works great now.

  • Rodrigo

    To unmask a field before submit I did the following (unmask() doesn’t work)

    $(“#form-name”).submit(function() {
    $(“#masked-field”).unmask();
    $(“#masked-field”).mask(“99999999999″);
    return true;
    });

    $(“#masked-field”).mask(“999.999.999-99″);

  • Roman

    I am getting wired behavior on IE6 if I set value without focusing on the input field (through javascript) and then focusing on next input element, IE6 clears my set values to empty.

    Thank you.

  • Jayesh

    Hi
    Great plug-in. I however wanted the mask to display by default in the text box something similar to asp.net AJAX control MaskedEditExtender where the attribute ClearMaskOnLostFocus when set to “false” displays the mask always in the textbox; this helps user experience as well. Any idea if the plug-in has that functionality

  • http://wjama.blogspot.com wjama

    felicitacione, tengo un proyecto que usa la primera versión

    /*
    * Version: Beta 1
    * Release: 2007-06-01
    */

    y durante todo este tiempo ha funcionado muy bien, ahora lo voy a actualizar, muchas gracias por tu esfuerzo y tiempo

  • DJ

    great plugin. The problem I have is that I am validating some date fields with some document ready functions using
    var jVal= {“dueDateVal” : function() {
    …field validation code here
    }

    and the use of the .mask

    $j(“#dueDate”).mask(“99/99/9999″,{placeholder:” “});

    at the beginning of document ready seems to cause the validation functions to execute twice.

    anyone experience this? suggestions?

  • Mariano

    Very nice job dude!

    Thank you for sharing.
    I would like to sugest you to code a mask for aphabetic, numbers (just integer and for real), and for money in other countries. In Brazil we use R$1.222.000,00
    Phone numbers in some cities are +55 (xx) xxxxX-xxxx
    There is a fifth number in São Paulo, all over the country is +55 (xx) xxxx – xxxx (2-2-4-4).
    Maybe money and phone numbers could be configurable. Think about it…
    I will use your lib, and I will note the page it is yours!
    Thank you Dude!

  • Donald Oppinger

    Very nice plugin man!

    Just 2 things I was not able to find out by reading through your site:
    1) Is it possible to mask a price field with optional digits e.g. expected results for entered prices (European interpunctuation) :
    € 1.500,90 – mask “€ 9.999,99″
    € 17.200,00 – mask “€ 99.999,99″
    € 500,20 – mask “€ 999,99″
    In this case the “optional digits” function with questionmark (?) does not work because we have optional values in front of the part 999,99 …

    2) Is it possible to give the input a default value e.g € 1,00 via the masking plugin

    Thanks in advance, any help is highly appreciated!
    Kind regards
    Don

  • Sergey Ponomarev

    I have same problem, and I found that this plugin https://github.com/RobinHerbots/jquery.inputmask supports option ‘unmaskedvalue’