Masks With jQuery Mask Plugin

Today is the oficial release of the version 0.4.3 of my jQuery Mask Plugin. Since I have never written about it before on this blog, I’ll teach you guys how to use it and some other cool features about it.

Downloading the code

 wget https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/jquery.mask.min.js 

The only thing that you guys need to do is include the javascript file of the plugin between the head tag in your HTML document and it’s all set to use.

The syntax

The jQuery Mask Plugin syntax is pretty simple. First, you input your  selector, followed by the .mask and then as a parameters you have to put the mask that you want the plugin to apply on the form field.
Example

$(document).ready(function(){
  $('.date').mask('00/00/0000');
});

In this example the mask 00/00/0000 will be applied in all the input fields that have the “.date” class. At jQuery Mask Plugin you don’t have pre-established masks, you choose the mask as you wish. On the website project you can see the jQuery Mask Plugin running with some others examples like this:

$(document).ready(function(){
$('.date').mask('11/11/1111');
  $('.time').mask('00:00:00');
  $('.date_time').mask('00/00/0000 00:00:00');
  $('.cep').mask('00000-000');
  $('.phone').mask('0000-0000');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
});

[amazon_link asins=’1521359288,B004GTLFDM,B004XQX4K0,0596517742,1593275846,1491924462,1593274084′ template=’ProductCarousel’ store=’igorescobar-20′ marketplace=’US’ link_id=’c8d5e5f1-631a-11e7-b915-25378f8362c6′]

As you can see, it’s possible to define other data type on each digit of the mask. This mask for example:

$('.mixed').mask('AAA 000-S0S');

The user can type a sequence of three alpha numeric characters, followed by space, three numeric characters, a slash, one string character, other number character and finally one string character, cool isn’t it?

Again, you can define the mask as you wish and the data type of each digit of the mask as well.

Features

  • Lightweight (~2kb minified, ~1kb gziped).
  • Masks on any HTML element!
  • data-mask attribute support.
  • String/Numeric/Alpha/Mixed masks.
  • Reverse mask support for masks on numeric fields.
  • Sanitization.
  • Optional digits.
  • Digits by range.
  • Automatic maxlength.
  • Advanced mask initialization.
  • Callbacks.
  • On-the-fly mask change.
  • Mask removal.
  • Customization.
  • Compatibility with Zepto.js

More about jQuery Mask Plugin

  1. jQuery Mask Plugin on Github
  2. Demonstration
  3. jQuery Mask Plugin
  4. All versions of jQuery Mask Plugin

Any problems, please, let me know.

Help us!

http://igorescobar.github.io/jQuery-Mask-Plugin/

#engineer #founder

Twitter   LinkedIn  

Posts Relacionados:

141 thoughts on “Masks With jQuery Mask Plugin

  1. Hi Igor ,

    i tried to make mask begin from right to left for for Arabic date like this :

    2007/12/01 i need start typing from right to left .. i hope you catch what i mean 🙂

    i hope u catch what i mean 🙂

    thanks for help

  2. hello Igor

    thanks for replay … i tried this function but it gave me wrong structure ..
    i type 2007/12/10 —> i had like this 1012/20/07 .

  3. Hi Igor,
    the mask is great, but I have a problem.
    When I use the masking with a multiple selector, like this:
    $(‘[name$=”taxNumber”]’).mask(‘00000000-0-00’);
    I get a comma, at the end of the numbers, like this: 12345678-9-10,
    with this:
    $(‘#taxNumber’).mask(‘00000000-0-00’);
    everything is fine.
    Any idea how to avoid this extra charater?

  4. I Need to know if i can show the mask on a input on focus without having to type anything in.

    Thanks guys!

  5. Hi Igor,

    I have tried your plug-in.
    It is working if I apply mask in jquery .
    But data-mask property is not working for text box.

    Thanks in advance.

  6. Hi Igor,

    Thanks for the quick response.
    But for me , below line is also not working.

    Note: my input control is in another contentplaceholder and my script is in another contentplaceholder.

  7. Hi, really like the plugin and would love to include in some work we are doing here in New Zealand. We are using jQuery 1.5.1, but when I grab the mask plugin code for that version of jQuery, it’s throwing an error in this code:

    destroyEvents: function() {
    el.off(‘keydown.mask’).off(“keyup.mask”).off(“paste.mask”);
    },

    as ‘off()’ isn’t defined as function. Looking at the jQuery docs, it looks like off() wasn’t introduced until version 1.7 of jQuery.

    I was wondering if there was a way around this? Upgrading our jQuery version isn’t an option at this stage unfortunately.

    Thanks so much.

  8. Olá,

    Gostaria de saber como eu faço para tirar o autofocus que o plugin adiciona ao input automaticamente?

    Obrigado!!

  9. Hi @Rachel. I’m think that you have to create the function “.off” and “.on” to make it work and make it as a proxy to the method “.unbind” and “.bind”. The another problem is that the plugin use all events under the namespace “mask” as you can see and I don’t know if it is available at that stage of jQuery. Take a look at the Compatibility section at jQuery Mask Plugin Repository: https://github.com/igorescobar/jQuery-Mask-Plugin#compatibility

  10. Hello Igor,

    Trying to add a dollar sign or currency symbol to a mask such as

    $(‘.money’).mask(‘#,###,###,##0’, {reverse: true});

    Tried adding .mask(‘$#,###,###,##0’, {reverse: true});
    Doesn’t show the $

    Tried adding .mask(‘#,###,###,##0\$’, {reverse: true});
    Puts the symbol in the wrong place

    Tried this as well .mask(‘#.##$0,00’, {reverse: true});

    Do I need to make this a function or is there a way to add the currency symbol in the pattern?

    Thanks,
    Jw

  11. Por favor puede orientarme como usar la expresión regular ‘[A-Za-z0-9\b]+’ como mascara de un campo tipo texto

    Gracias

  12. Gracias Igor. I was wondering why the optional digits weren’t working for me on decimal values, but it turns out I had an old version of the plugin. Downloaded the latest version (1.6.4 as of this writing), and it works perfectly. Nice work, thank you. -Dave

  13. I am trying to use your mask plugin with mvc4.

    I am relatively new so I might not understand as much as I need to. I have the

    in my layout page

    the jquery.mask.mask.js, jquery.mask.min.js in my scripts folder

    and this in my view

    $(document).ready(function () {

    debugger;
    $(‘.phone’).mask(“(999) 999-9999”);

    $(“.phone”).on(“blur”, function () {
    var last = $(this).val().substr($(this).val().indexOf(“-“) + 1);

    if (last.length == 3) {
    var move = $(this).val().substr($(this).val().indexOf(“-“) – 1, 1);
    var lastfour = move + last;
    var first = $(this).val().substr(0, 9);

    $(this).val(first + ‘-‘ + lastfour);
    }
    });
    });

    when running the page I get an “Uncaught TypeError: undefined in not a function” error when $(‘.phone’).mask(“(999) 999-9999”); is hit.

    do I need the json files in my project? where? Script folder?

    any help will be appreciated. Thank you

  14. Hey igor, what about a mask for Email? didn’t know how do it with ur plugin

  15. @Javier use a validation plugin. you are probably wondering how to do it because you don’t want to validate/sanitize your input field. There is no such thing as e-mail mask.

  16. Pingback: Плагин jQuery Mask Plugin | Zencoder

  17. Thank Igor for this plugin, I’m trying to implement it, but what I need is the following.
    $(“.iItemQty”).mask(‘#,##9.00’, {reverse: true}); I tried it to use it with: 12,345,678.90 and it doesn’t work, just display: 5,678.90.. so, I had to add the rest as follow:
    $(“.iItemQty”).mask(‘###,###,##9.00’, {reverse: true}); what happened with # ?? I thought I could add any number quantity.

    The second issue is about: 00,432,234.88, as you can see 0s on the left must to be remove them given the value is a number instead a string.

    A similar case, I’ll save 432234.88 in the database, how can get the value with mask back again ?

    Any clue?
    Thanks.

  18. What if I want to use this by just dropping the js onto the page and not having to explicitly call mask for each class? The docs say I should be able to do this but that doesn’t work. It never makes it into $(‘*[data-mask]’).each(function()…

  19. Hi igore,

    I am using jquery 1.7 but thisnot seems to be working .Split was not happening.Can you please let me know does this plug in support jquery 1.7 or it required any other libraries??Please help me in this regard.

  20. Então brother, coloquei uma mascara opcional na versão que eu tenho e queria falar com você sobre isto =D, se possivel, pega meu email ai.

  21. The puglin doesn’t work to me. I’m trying to make a web app in Ruby on Rails and I already added it to my application, but I cannot apply it in my text fields, it just doesn’t mask it. I tried inut the class with :class => ‘ip_adress’ and input_html sintax, but just doesn’t work. Can you help me please?

  22. I have been trying unsuccessfully to do US currency using the html data-mask attribute. It should allow a format of 1,000,000.00 with the “.00” being something that is optional. How can I make the period and two digits to be optional?

  23. Hi Igor,
    How to initialize the plugin to use HTML notation?
    Calling $(‘.myInput’).mask() fails due to the empty mask.

  24. @Iaacov upgrade your plugin and make sure you’re calling all your javascript files at the bottom of your HTML document. If you want to enable HTML Notation for dynamically inserted data-mask elements you need to set
    $.jMaskGlobals.watchDataMask = true;

  25. Hello,

    Great plugin, but following question has arisen: when i use the normal date mask, is it possible to have trailing ‘_’ so the user could see how much he still has to type?

    like “12.12.20__” ?

    kind regards Jan

Leave a Reply

Your email address will not be published. Required fields are marked *