State of the Masked Input Plugin

This post should be titled, "Dude, Where the Hell have You Been?" I'm sorry I have ignored this project for so long.

New Home
First, let me get started by saying that I moved the source to github a while back.  It now lives here. If you look at the commit history, I moved it there months ago, fixed a few outstanding bugs, added a feature that someone needed for a specific project and then just left it. I'm picking it back up somewhat, but we'll talk about that in a minute.

Email Bankruptcy
There have been a TON of emails from you guys; so many that I haven't been able to keep up.  Most of the emails have been about two bugs: an off by one goof I made for the completed function and forgetting to use charAt() to access a char in a string. These bugs are fixed in the github repo right now (I think). I'm calling my email situation a total loss.  Sorry to those that have emailed me and not gotten a response.

Birth of a New Project
Part of the reason I stalled on this project was a lack of tests.  For a while I wasn't sure how to even test this thing given that it is purely driven from user input.  Up to this point I had just been opening up a test page in every browser I could think of and running through a few things manually.  A couple of weeks ago I sat down one night and spiked out a rough version of a keystroke simulator which I'm now calling KeyMasher. Please be kind, it's still very rough. Once I get it more polished, I'll put up an official project page on my blog here.  I had found a few other projects which do this and jquery.autotype seemed to be the closest fit. Unfortunately I couldn't get it to work with my specific needs, so I've now written my own with a syntax I feel more comfortable with.  I've already worked out a few tests using this against my masked input plugin.

I'm Just One Guy
After I get a half way acceptable set of tests around it, then I can feel a bit more confident about what I change.  I would like to be able to implement some of the features I've seen come across my email. It will take some time to get everything to a place where it should have already been.  Please be patient, I'll get there. :)

  • Alur

    Hi, but how can I past to input field special symbol? I need to show symbol of degree – “°”.

    So, I need the mask: “999°999’999””

    But plugin can’t show symbol of degree.

  • http://drfranca.com Daniel

    Hi, you need some help?

    Im trying to use your plugin in mobile devices and he gets crazy, so… can i help you?

    Tks!

  • Timur

    Good script, thanks.
    But i wonder if i can put not only fixed amount of letter in input field?

  • Tony

    Nice script-

    Like many have asked, is there a way to remove the mask on submit?

  • Yoyo

    This has been asked before.

    How do we REMOVE THE MASK when we exit the input field?

    $(“#element”).unmask() <– does not work.

  • Phil

    Great plugin. We have had many request for email address masks. Is this something that could be added?

  • dj

    I am new to web apps. Do web developers not use the same jsp to accept and display data for an object?

    I collect data on a jsp, persist it to db, and redisplay on the same jsp until the user chooses to move to the next jsp.

    the masked input is great for input, but once a form has been submitted and redisplayed, the field has a value, the mask is gone and can not be reapplied with out destroying the value in the form field.

    Am I correct? there is no way to apply the masked input to a field with existing value?

    For what it does…masked input is fantastic, works without fail. A great addition to the tool set available to everyone developing apps.

  • http://cfna.com lisa

    Is there any way to prevent an input field from being cleared when the entered input does not conform to the mask. For example, if I have a mask that is ‘999999999’ (9 digits) and the user only enters 8 digits, I would like to have those 8 digits remain in the input box so that they don’t have to re-type the value they just entered.

  • http://messengerwebdesign.com Chris

    Phil: the way masks work, you really can’t use them for e-mails — because an e-mail address can contain any number of characters before & after the ‘@’ sign. The RFC for e-mails is quite complicated (the RFC defines what is & isn’t allowed). There are regexes for validating an e-mail; the best is Dominic Sayers’ is_email.php (http://code.google.com/p/isemail); you can also use a regex to validate clients-side w/ JavaScript.

    If you’ll visit my website’s contact page & email me, I can send you some sample JQuery that validates for e-mail. And remember, many CMSs also have built-in functions for this.

    Cheers,

    — CZ

  • http://blog.echothis.com Rolf

    First, thanks for such a great plugin.

    One issue – I’ve noticed that if you attach a blur() event to a masked field, that event fires *before* the plugin’s completed() event, where you really want it to be firing after. This presents a problem if you have entered, say, an invalid string which will get blanked out, but only *after* the blur() event fires.

  • http://satellitejones.com morgan

    awesome plugin – thank you

    I’d also love a solution for date entry that only permitted valid entries – this gets me part of the way but still permits some meaningless dates to be entered:

    $.mask.definitions[‘m’]='[01]'; //month 1st digit
    $.mask.definitions[‘d’]='[0123]'; //day 1st digit
    $.mask.definitions[‘y’]='[12]'; //year 1st digit
    $.mask.definitions[‘h’]='[09]'; //year 2nd digit
    jQuery(‘#date’).mask(”m9/d9/yh99”);

  • http://geekvigarista.com Carlos Alexandro Becker

    How about variable numbers of digits, for a money text input, for example, we could have something like “$ *9.99″.

    What you think?

  • divyesh

    how to set the date using mask.

  • http://na Jorge

    Hi, great plugin, but! How remove mask when i do submit ?

    Thanks in Advance

  • http://www.canal24.net Canal 24 .NET

    Good plugin, but i would need an option to avoid shifting while typing. For a date time mask this is a must: if I type 01/05/2011 and want to change 01 for 02, shifting the whole date time is annoying and makes the mask unusable. Anyway, thanks and congrat for your work :)

  • Denis

    I’m need ‘replace on type’ too, as Canal 24 .NET says.

  • http://www.acapellas4u.co.uk Richard

    @jerjoham @ March 8th, 2011

    Thanks for the great plugin. I also needed the ability to submit the data without the mask so I tried your code.

    $(‘#phone’).mask(‘(999) 999-9999′).bind(‘blur’,function(e){$(e.target).attr(‘value’,$(e.target).mask())})

    I have found that your code doesn’t work in Google Chrome.

  • Peter

    Re: issues with Android platforms. I understand that there may be a bug that occurs in the following scenario:

    If you have a maxlength on the input field that is equal to or less than the length of the input mask, you won’t be able to enter data into that field on an Android.

    The solution is to either remove the maxlength or increase it to the length of the mask plus 1.

    Hope this helps!

  • Sam

    Has anyone else had the issue where only some characters will be pasted?

    Specifically, I am using the mask (999) 999-9999? x99999 and when I paste only the first 3 digits paste.

    Anyone encounter and solve this?

  • Olga

    Hello!
    We can paste a cursor at any position in the input field.
    But i think this is wrong for empty field. The cursor should be at first position for empty field always.

  • Olga

    Hello again!
    This script has bug:
    If Mask begins from ? and we type some symbols from center/end of input field, then put the cursor at the beginning of the field – typed symbols paste at the end of input field again!!! And this is can be many times.
    Anyone can solve this bug?

  • boris

    I need an autocomplete(suggest) as option with this plugin, I pretend to use it in capture for accounts format(example 185-001-0001,185-001-0002,185-001-0003…)so I’ll capture the first numbers an I’ll obtain a suggestion. I saw autocomplete plugins but none has this future; Merge this two function may result in a great plugin

  • http://zadradesign.com Zachary

    Love this plugin and it has come in very useful for one of my projects.

    One issue I have encountered is that when the user presses the “Reset” button on the form, the masking is lost until the masked field gains focus again. It would be nice if the masking would tolerate form resets.

  • Igo

    How do i force the first 3 chars?
    For example i want to have +50 in the begin always, and then the mask 99999999 99

    But the question is how to set/force the first 3 chars to be “+50″?

  • Ago

    How i can use a defaul value? I try but dosen’t work!

  • ras

    company_id Employee_ID
    001 0001
    001 0002
    001 0003
    I wan’t this answer,how to generate it

  • Hafiz Bistar

    thanks for this amazing script.

    it turns out it was easy to limits it to a certain number :)

  • Bodil

    It will occur “caret positionning” problem in android web platform,because the setSelectionRange has a bug in android web platform.

  • marvin

    Not to clear the mask(permament mask), just comment the line:

    //if (!allow) input.val(input.val().substring(0, lastMatch + 1));

  • marvin

    I forgot, after comment the line, make the mask optional:

    $(“#txt”).mask(“?999-999.999″);

  • http://no paul

    good model

  • Rob

    Hey Josh,

    Great plugin. I found a major bug when using Chrome. It’s a pretty specific case though and only happens when I have the ? mark in my mask. I think it has something to do with the way you’re calculating the pos in the focus bind in the checkVal() function. I changed the moveCaret() function to this but I’m not sure it’s the best place to fix it. Anyway my fix works beautifully, but maybe you would know a better solution.

    .on(“focus.mask”, function() {
    focusText = input.val();
    var pos = checkVal();
    writeBuffer();

    var moveCaret=function(){
    if (pos == mask.length)
    input.caret(0, pos);
    else if (pos < input.val().length)
    input.caret(pos);
    };

    ($.browser.msie ? moveCaret:function(){setTimeout(moveCaret,0)})();
    })

  • http://www.blog-travel.com.ar Federico

    I have this same question:

    How I can put a mask that accepts n-numbers decimal separator and only four decimal positions? for example:
    0.124
    123456789123456789.2541
    etc.

    I don’t know how.

    Please help.

  • http://web4develop.ru Belyash

    Bug in Opera (v.10.00, v.12.02) with input[type=tel]. The caret goes to the last position after keydown.

  • Rich

    I have a similiar problem. If you tab in to a masked field, the cursor jumps to the last position in the text field. Is there a fix for this.

  • Datajack

    I’ve added a mask (‘x’) for HEX characters.

    var charMap={
    ‘9’:”[0-9]”,
    ‘a':”[A-Za-z]”,
    ‘*':”[A-Za-z0-9]”,
    ‘x':”[A-Fa-f0-9]”
    };

    although very simply, I wanted to share as it could be used enough to be included in the next release.

  • http://neochrom.biz AlexS

    How about cyrillic alphabet?

  • Andreyan

    вот русский
    ‘r': “[А-Яа-я]”

  • Andreyan

    Hi! How to make an optional character in the middle of the mask and to the rest of the move when you enter an optional character?

  • elbirra

    Hi!
    Can’t see if this question from Julien is answered, I have a similar question:

    When leaving the input field, is it possible not to clear it if the typed text is not valid?

  • Ismail

    I’m experiencing a similar issue to “Sam @ February 28th, 2012″. I have masked phone number inputs using (999) 999-9999? x9999, and if I copy and paste from one of the masked inputs to another, only the area code and next three digits are pasted. Any help would be greatly appreciated.

    Sam @ February 28th, 2012
    “Has anyone else had the issue where only some characters will be pasted?

    Specifically, I am using the mask (999) 999-9999? x99999 and when I paste only the first 3 digits paste.”

  • Ismail

    Ok, I figured out the issue with not being able to paste into a masked input field. I had a maxlength=”30″ attribute on the input, and the masking was using 20 of that, so only 10 of the characters that I was pasting were being pasted. I increased my maxlength and that solved the problem.

  • Dave M

    Plugin is working great but noticed a small issue on Safari browser only (tested on v4 and v5, v5.1). The infinite looping is still happening.

  • Ty G

    Any chance of a currency mask
    Something that could be like:

    echo ‘
    JQuery(function($){
    $(“#ff_elem1668″).mask(“$999,999.99″);
    });
    ‘;

    My values sometimes don’t end with 2 decimals,
    so whole numbers would obviously need end with .00
    And numbers with just 1 decimal would need to end like .X0 where X is the single decimal value.
    That would be awesome for people like me needing a easy way to convert their calculations into dollar values.

  • http://nil karthik

    hi,

    i am using this plugin which is good, but i have a requirement on the phone number. My scenario is to format the number entered by the user on tab our/blur.
    ON Focus text box display asb below
    (___) ___-____
    when user typed the number as shown below
    (888) 2__-____

    now i need to reformat the above input as below
    (___) ___-8882

    please let me know how to achieve this ……

  • Rabiul

    Hi,

    I am using your phone mask input. It work great but I need the cursor postion at the begining when page load.

    Presently your maskinput allowing user to enter data at any position but it should start from begining. In middle it should not allow me to enter any data.

    Please let me know how I can solve this.

    Thanks

  • http://www.eddiedillon.info Eddie Dillon

    I am not sure if this section of the script was being used or not, but I had to remove it to make the masked input control work in my situation.

    On line 29, I just removed the check that looks like this:

    if (this.setSelectionRange) {
    this.setSelectionRange(begin, end);
    }

    It looks like the begin and end are always being set to the same so it just positions the caret at the end of your field, or at least when there is text in the field so I just removed this check and my text is always highlighted, which is the default functionality in chrome anyways.

  • Diego Vieira

    Ty G, I’m looking for the same.

    Quote from Ty G:
    ——————————
    ny chance of a currency mask
    Something that could be like:

    echo ‘
    JQuery(function($){
    $(“#ff_elem1668″).mask(“$999,999.99″);
    });
    ‘;

  • LUIS

    sddsd

  • http://beafully.vn Phuc

    I need to put the Google Analytics code as mask input. The rules is:

    UA-99999999-99

    I want it always have “UA” in beginning but the “A” will replace by [A-Z] as default rule. How I can change this?

    Thanks