Geral, Javascript, jQuery

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


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.

( ͡ ͡° ͜ ʖ ͡ ͡°)
\╭☞ \╭☞ Follow me on Twitter!

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.


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:

  $('.date_time').mask('00/00/0000 00:00:00');
  $('.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(',00', {reverse: true});

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.


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

Related Posts:

148 thoughts on “Masks With jQuery Mask Plugin

  1. First of all it is a good plugin 🙂 but it is not working in samsung s3mini related models ‘GT-I8190’, ‘SM-G730A’, ‘GT-I8190N’, ‘GT-P5100’

  2. How to create a mask for first digit will be a number with 6 or 8 or 9 and total number length will 9 in mask jquery.
    Like as : 658452123
    or 887545265
    I need first digit will be 6 or 8 or 9 otherwise it will be else

  3. how to restore the original mask setting when the reset button is triggered? When the reset button is clicked, it wipes out all mask settings.

  4. Nice plugin!
    How can I mask this phone?
    8 (926) 000-000-000
    where 8 (926) are predefined.

    But when I apply this mask ‘9’ will be replaced..

  5. Hello,
    I’m trying to figure if there’s a way to use the on-the-fly mask to accept phone number input in two different ways?
    I want to allow people to enter 000-0000 or (000) 000-0000. Most of the time users just need to enter 7 digits, but there are rare occasions when the person may have a need to use 10 digits. Is that possible with the on-the-fly-mask?

    Thanks for your help.

  6. Hi,
    Only the number of characters of the mask istaken in accont, not the other effects.
    By example with a mask specified like this (’00/000′):
    I get this:456123
    but not this: 45/123

  7. Hi, tanks for the great component.

    I need to implement a “multiple values masked field”.

    Ex: Date mask => 10/10/2015;10/10/2016;10/10/2017…

    is it possible ?

    kind regards

  8. Great plugin, love its flexibility. However, it isn’t clear how one would do a mask for email addresses — using your translation parameters does allow for regular expressions but it seems like you need to type in the precise amount of alphanumeric characters in the mask declaration, which is obviously not something one can predict for email addresses. Note that I am not the only person wondering about this:

    Would you be able to provide an example here for how that might be done? I appreciate your help here. Thanks, j

  9. hey there Igor! first of all thank you for this awesome piece of software! its a life saver! i got a question tho: how can i make it work with brazillian portuguese accentuation like Çç ã á À é, i might have done something wrong. i’m using it as follows

    ‘translation’: {S:{pattern: /[A-Za-z ]/, recursive: true}}


  10. I need to replace my mask library and this looks great. The one I am using now does not allow me to copy paste. I have a big question. My current mask uses 9 for numbers , your seems to be 0. But I also see 9s so is there any difference bettwen using 9 or 0?

    Thank you

  11. OPA Igor estou tentando fazer uma máscara para pegar somente : espaço traço – e alfanuméricos sem com no Max 200 caracteres…

    Estou tentando assim :
    $(“#meuId”).mask (“AAAAAAAAAA”);
    Como posso fazer pra não colocar tantos A’s… exemplo A* assim funcionaria para várias entradas e o espaço e o traço ainda nem Vi.


  12. I’m using your plugin and it’s great. The only thing I can’t figure out is how to compare the input field as numeric against a numeric field from a database or using it in jQuery min, or calculations, etc.
    example: using mask on 3 fields where:
    A + B must equal C
    1,200 + 0 = 1,200 returns true (Valid)
    600 + 600 = 1,200 returns false (Invalid)
    HELP please!

  13. This is probably a simple thing for you…
    I want to append a http://www. to the front of my pattern
    “W”: { pattern: /[\w/\-.]/, recursive: true }
    Any ideas? I searched around a lot but came up short.. if I could figure this out I will defiantly use your plugin and leave a tip. Thank you!

  14. Olá, não estou conseguindo usar as máscaras usando a notação html data-mask=”00/00/00″, a máscara funciona apenas no primeiro elemento de meu formulário onde apliquei a tag, nos demais não funciona e nenhum erro é gerado.

    O que posso estar fazendo de errado?


  15. how can I insert the charater “€” or “$” at the begin of the mask in a money field?

  16. Hello, Igor! Thank you for such a helpful plugin.
    When I try to edit text in the field with mask, it works strange.
    For example:
    1. I entered 1234-5678.
    2. I try to edit entered phone number and place cursor between 1 and 2
    3. I enter 9.
    I expect to replace 2 by 9 and move cursor between 9(was 2) and 3
    But I see 1923-4567 in masked input field and cursor steel stands between 1 and 9

    Please answer, is it a bug? Can it be fixed?

  17. hi dear.
    thank you for your project.

    i just have a question about jquery mask plugin.
    how i can make an unlimited mask for a text input ???

  18. Salve Igor! Parabéns pelo Plugin TOP! Estou fazendo uns testes e se o plugin me atender 100%, vou pingar no seu Pledgie

    Estou enfrentando duas situações, e gostaria de saber se tem como resolver :

    1. Usar 2 Function Mask (A do telefone – como do seu exemplo), e repliquei para o CPF/CPNJ da mesma forma. No entanto, quando começa digitação, parece que se perde, e mesmo sendo formatação de CNPJ, ele começa colocando os ‘()’ do DDD, e termina bloqueando como CPF.

    2. Na formatação para valores, como posso formatar valores negativos ?

    Grande abraço.

  19. Olá,

    o callback onComplete não identifica o input que está sendo alterado?
    Estou tentando pular para o próximo input usando:
    onComplete: function(){ $(this).next(‘input’).focus();}

    Poderia me dar um auxílio nisso?

  20. Hi, Its a very nice plugin and very easy to use.

    I just came across one issue. Its working fine on the Web but once we open the same page on a smart device, after entering 2 characters it move 1 character back.

    Any solution or update for that? Thank You

  21. Olá Igor,

    Esse plugin está ótimo! Só preciso configurar o atributo money para incluir o prefixo “R$” é possível?

  22. Hi, Its a very nice plugin and very easy to use.

    how i can get the key pressed with option onKeyPress ?

    thank you in advance

  23. Hi Igor. Very good plugin!!!

    Can I remove the leading zeros from an IP address? For example:

  24. Hi,

    Can you help me with the mask
    What I want is input text with regular but if I use ‘#’ like this:

    $(“#xxx”).mask(‘#’, {
    ‘translation’: {
    ‘#’: { pattern: /[一-龠]+|[ぁ-ゔ]+|[ァ-ヴー]+|[a-zA-Z0-9]+|[a-zA-Z0-9]+[々〆〤]/ ,optional: true}
    },maxlength: true

    Then it allows me to input only 1 character! How can I set to no limit input?

    Thank you

  25. Hello friend, frist of all congratulations for this great component. I’m using it and masks work fine, but properties like reverse or selectOnFocus don’t work, do you have any idea what can cause this? Why just mask works?


  26. First of all great plugin.

    But its still missing a validation that clears the field if i dont finish filling the form.

    ex: date dd/mm/yyyy and i write dd/mm

    it shoud clear the input since the values are not optional.

  27. Hello,
    Great work!

    Could you pease help me?

    Your code
    $(document).ready(function() {
    $(‘.field-name’).mask(‘SS00 0000 0000 0000 0000 00’, {
    placeholder: ‘____ ____ ____ ____ ____ __’

    is it possible to place defaut FR insted of SS in the mask field.
    In the out put i want to enter only FR not other alphabets.

    Please help me

  28. Hi, beautiful tool you have! 1 problem that is bothering me though:
    upon storing “masked” data, it adds a pipe | symbol at the end.
    How do i get rid of that?

  29. Hi, am using your plugin on my website to mask out phone number inputs but the prefix and suffix options are missing on it. Please, i would like to know how long it can take for you to add these important features on it.

Leave a Reply

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