Mascaras com jQuery Mask Plugin

Hoje é o lançamento oficial da versão 0.4.3 do meu plugin jQuery Mask Plugin. Como nunca falei sobre ele aqui no blog, vou ensinar vocês como utiliza-lo e algumas features bacanas do plugin.

Baixando o código

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

A única coisa que vocês precisam fazer é incluir o plugin entre as tags do seu documento e pronto, o plugin está pronto para vocês utilizarem.

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

A sintaxe

A sintaxe do jQuery Mask Plugin é bem simples. Primeiro você passa o seletor, seguido de .mask e como parametro você vai passar a mascara que você quer que o campo tenha.
Exemplo

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

Neste exemplo, todos os input fields que possuem a classe “.date”, a mascara será aplicada. No jQuery Mask Plugin você não tem mascaras pré-estabelecidas. Você escolhe a mascara como você quiser. no site do projeto vocês podem ver o jQuery Mask Plugin funcionando e mais alguns outros exemplos, como os a seguir:

[javascript]
$(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});
});
[/javascript]

Veja que que eu posso definir o tipo de dado que o usuário pode imputar a cada dígito. Nesta máscara por exemplo:

[javascript]$('.mixed').mask('AAA 000-S0S');[/javascript]

O usuário poderá digitar uma sequência de 3 caracteres alpha números, seguido de espaço, seguido de 3 caracteres números, seguido de traço, seguido de um caractere do tipo string, seguido de um caractere do tipo inteiro e seguido de um caractere do tipo string, legal, né?

Vocês podem definir a mascara como quiserem e também podem definir o tipo de dado que pode ser inputado em cada dígito da mascara.

Features

  • Lightweight (~2kb minified, ~1kb gziped).
  • Mascaras em qualquer elemento HTML.
  • suporte ao attribututo data-mask.
  • Mascaras com String/Numeros/Alpha-Numéricos/Mixed.
  • Suporte a mascara reversa para campos numéricos.
  • Sanitização.
  • Digitos Opcionais.
  • maxlength Automático.
  • Inicialização de mascara avançada.
  • Callbacks.
  • Mudança de mascara On-the-fly.
  • Remoção da mascara.
  • Customização.
  • Compatibilidade com Zepto.js

Mais sobre o jQuery Mask Plugin

  1. jQuery Mask Plugin no Github
  2. Página de demonstração
  3. Source-Code do jQuery Mask Plugin
  4. Todas as versões do jQuery Mask Plugin

Qualquer problema, por favor, me avisem.

AJUDOU? AJUDE NO DESENVOLVIMENTO DO JQUERY MASK PLUGIN

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

131 thoughts on “Mascaras com jQuery Mask Plugin

  1. Muito bom o plugin. Mas queria saber como desativar a máscara. Eu quero tirar as máscaras de um campo depois de ela já ter sido ativada. Eu criei uma página onde dependendo do que o usuário selecionar no dropdown, o campo vai servir para coisas diferentes.

    Like

    1. Marcelo,

      Hoje não existe um método nativo para fazer isso, mas me comprometo a fazer isso e comitar o quanto antes.

      O que você pode fazer para resolver o seu problema agora é isso:
      $(“SELETOR_DOS_ELEMENTOS_QUE_VOCE_QUER_REMOVER_A_MASCARA”).die(‘keyup.jquerymask’);

      Like

  2. Olá Igor.

    Tens alguma solução já pronta para a questão do 9º digito de celular no estado de são paulo? A mascara ficaria dinâmica dependendo do DDD ou algo assim…

    Like

    1. @Wellington

      É só utilizar os callbacks do plugin e alterar a mascara quando o DDD do telefone for 11. Na página do projeto tem um exemplo em que se utiliza callbacks e a mascara é alterada on-the-fly.

      Qualquer problema me avise.

      – Igor.

      Like

  3. Olá Igor,

    Referente à questão do 9º dígito para o DDD 11, no qual a máscara deverá ser (99)99999-9999, concorda que, futuramente, pode ocorrer de termos que voltar no código e validar para mais opções de DDD? Acredito que seja um tanto quanto inviável dessa forma.
    Estou procurando uma solução para que a máscara aceite, no mesmo campo, tanto (99)9999-9999 quanto (99)99999-9999, ou seja, que o 5º dígito no prefixo não seja de preenchimento obrigatório.
    Pode me ajudar?

    Obrigada.

    Like

  4. Não consegui fazer funcionar… tem como disponibilizar um .zip com uma pagina de exemplo ?? ou o código da pagina de ex. ..

    Like

  5. eu segui esses exemplos Igor, mas não funcionou… consegui fazer funcionar uma outra versão do jQueryMask… mas essa não consegui… curti muito o lance do “reverse” … não tem como enviar uma pagina exemplo ??? pois com certeza estou fazendo algo de errado.. sou leigo nessa parte de programação.. mas estou aprendendo, minha praia é mais Designer…

    Se puder me ajudar..
    Valew

    Like

  6. Igor primeiramente parabéns pelo plugin esta ficando cara vez melhor, queria ver com você, se voê sabe o porque que no android (testei na versão 2.2 e 2.3 no navegador padrão) quando temos a mascara de telefone “(99) 9999-9999” ele pula de posições, não insere em ordem igual nos navegadores. Estou desenvolvendo um site para celular e estou tendo esse problema.

    Obrigado!

    Like

    1. Alan!
      Estou trabalhando para tornar o jquery mask plugin cada vez mais compativel com os navegadores, porém, eu ainda não consegui descobrir o motivo de acontecer isso nos browsers mobile. Assim que eu tiver alguma novidade vou estar liberando isso para vocês. Se você descobrir por algum motivo, nos avisa aqui que eu corrijo RIGHT NOW!

      Like

    2. @Alan
      Fiz uns testes aqui e o plugin funciona normalmente no Chrome Mobile e no Opera Mobile no Android. No navegador padrão realmente está apresentando problemas. Vou começar a investigar e ver se consigo resolver.

      Like

  7. Olá, Igor. Parabéns pelo plugin.

    Existe a possibilidade de configurar uma determinada máscara para aceitar valores negativos?

    Obrigado.

    Like

    1. Olá Tiago!
      Sinceramente, se você quiser usar campos de moeda etc, existem plugins especificos para resolver este tipo de problema. Não fui muito afundo nestes tipos de problemas por que se eu fosse tentar resolver o problema de mascara e toda a lógica e recursos necessários para resolver os problemas dos campos de moeda o plugin ficaria muito pesado.

      Like

  8. Igor, você está de parabéns! Muito obrigado pelo código, me ajudou bastante! O único probleminha que estou tendo, é que agora eu coloquei um novo incremento no meu código (jQuery Box Collapser) e ela usa a seguinte linha para funcionar:

    E com isso, o acredito que brigue com o core do seu exemplo, pois ele para de funcionar. Existe alguma solução que posso utilizar para o Box Collapser, sem que dê esse problema com o seu código?

    Like

  9. Igor, tenho estou adicionando campos dinamicamente usando o append() do próprio jQuery, porém as máscaras dos campos não funcionam. Você já teve algum problema parecido?

    []’s

    Like

  10. Cara, tentei fazer algo parecido aqui no aspx.(estou desenvolvendo em asp.net)

    e fiz a seguinte função;

    $(document).ready(function ($) {
    $(“#MainContent_txtId_Cliente”).mask(“0000”);
    });

    E o código do text box que recebe a validação é o seguinte

    A máscara aparece no textbox, mas quando eu clico nela o cursos vai todo para a direita e eu não conigo digitar nada(mesmo mundando a posição do cursor)

    Like

  11. Olá!
    Parabéns pelo “Mask Plugin”.
    Gostaria de sugerir, ou ver se tem como, limitar o número a ser digitado em uma data, por exemplo no ano:
    $(‘#data’).mask(‘D0/M0/ANO’, {‘translation’: {D: ‘[0-3*]’, M: ‘[0-1]’, ANO: ‘[1900-2014]’}});

    Testei assim e não consegui…

    Abraços

    Like

    1. @Nissius Não, é possível fazer o que você procura da forma que está tentando fazer, mas é possível você utilizar os callbacks e fazer as validações que você procura dentro do callback.

      Like

    1. @Leonardo Até o momento, sem previsão. Placeholder é algo que você pode contornar no front-end. E na minha visão, quanto menos “lixo” estiver dentro do campo de formulário menos filtros você precisa fazer do lado do servidor para armazenar a informação, por isso eu não estou dando tanta prioridade assim para esta questão.

      Like

  12. Bom dia, Igor,

    Primeiramente, parabéns pelo ótimo trabalho!

    – Percebi que o onComplete só é invocado se a máscara for aplicada por completo. Ex.: No caso de máscaras com dígitos opcionais, como IP (‘0{1,3}.0{1,3}.0{1,3}.0{1,3}’), caso estes não sejam digitados (‘10.1.1.1’), o onComplete não é chamado.

    Meu problema, na verdade, é o seguinte:
    Preciso que, ao digitar um valor que não “case” com a máscara, ele suma automaticamente. Ia fazer isso usando callback, no onComplete, mas caí no problema que citei acima.

    Alguma sugestão de como possa resolver este problema?

    – Estou usando a versão 0.10.1 do seu plug-in.

    Like

  13. @Élcio

    Faça uma verificação no onBlur do elemento usando uma expressão regular:

    $(‘element’).blur(function(){
    if($(this).val().match(/^0{1,3}.0{1,3}.0{1,3}.0{1,3}$/)==null)
    $(this).val(”);
    });

    Like

  14. Opa Igor Beleza,

    Cara, estou com a seguinte situação, tenho uma mascara aqui, somente números,
    alinhada em modo RTL(dir=”rtl”), porém quando aplico o css(via jquery, via css), a mascara inverte tbm, ela só volta ao normal quando eu completo a quantidade de caracteres. o problema que essa quantidade não é obrigatoria.
    Exemplo:
    Posso digitar 9 digitos:
    1234567/89
    Ou digitar 7 digitos:
    12345/67

    A obrigatoriedade é somente os após dois digitos ele tem que colocar barra.
    Seria algo como o money, mas colocando a barra.

    Segue o fiddle:
    http://jsfiddle.net/thwyster/ma4EQ/

    Saberia me dizer como posso resolver ?
    Agradeço desde já,
    Obrigado!

    Like

  15. Olá Igor,

    Estou desenvolvendo uma app com o jquerymobile, porém percebo que não está funcionando a mask quando carrego uma nova página utilizando data-ajax=true. Entende?

    Não compreendo o porquê 😦

    Pode me dar uma ajuda, por favor?

    Like

  16. Bom dia Igor. Parabens pelo componente!!! Cara, como eu poderia criar uma mascara de email e uma máscara que identifique se é CPF ou CNPJ?

    Like

  17. Igor, eu já tinha lido os comentários e mesmo assim, não encontrei nada. O Alexandre que você me disse eu também não consegui encontrar. Eu tentei utilizando esta função:

    $(document).ready(function () {
    $(‘.formTextbox’).mask(‘E’, {
    translation: {
    ‘E’: { pattern: ‘/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/’ }
    }
    });
    });

    Mas isto também não funcionou, pois toda vez que digito alguma coisa a máscara apaga!!! Você tem alguma outra sugestão?Att, Matheus.

    Like

    1. @Matheus Mascara de e-mail, até da para fazer, mas não vale a pena. Até por que não existe “mascara” para e-mail. Cada um digita o e-mail da forma que entende, não existe um padrão “fixo” que deve serseguido como data, CPF etc. O que você está querendo fazer é se livrar de ter que “sanitizar” no input, não faça isso. Valide o e-mail. O tópico que mencionei o @Alexandre responde a sua questão sobre o CPF e CNPJ. O código que você postou também está errado. Não é assim que o plugin funciona. Cada caractere da mascara é analizado de forma separada. Você não pode criar um único “atomo” E e usar ele para validar todo o resto dos caracteres digitados, este não é um plugin de validação, é de mascara. E o que a gente entende por mascara são que devem ser preenchido seguindo um “pattern” pré definido. Espero que tenha clareado para você.

      Like

  18. Ahhh….muito obrigado Igor. Ficou muito mais claro agora!!! Imaginei que o plugin pudesse entender o regex como um todo e não somente no caractere. Enfim, mais uma vez, parabéns pelo componente de máscaras.

    Like

  19. Olá amigo, parabéns pelo trabalho. Estou utilizando seu plugin em todos os projetos da empresa.

    Preciso de uma ajuda: no seu exemplo da mascara monetária, como eu faço para o campo aceitar valores negativos?

    Abraço

    Like

  20. Obrigada por me ajudar!
    Depois de verificar a sua solução, dei uma olhada na documentação do outro plugin, e acabei descobrindo como fazer os dois plugins funcionarem. Usei um callback (afterAdd) do outro plugin, e dentro dele, chamei o de máscaras. Não sei se está certo, mas funciona. 😀
    Parabéns pelo plugin, ele é ótimo. ^^

    Like

  21. Olá @IgorEscobar , tenho um pequeno problema. Em um formulário quando é enviado o POST e o arquivo PHP retorna erro por exemplo, se o usuário “Voltar” a página utilizando as setas do navegador “Voltar” e “Avançar”. os campos que foram mascarados não voltam preenchidos! os que não foram mascarados voltam preenchidos normalmente. Tem algo que eu possa fazer, ou é limitação do navegador mesmo?

    Like

    1. @Ewerton os dados tem que estar no formato da mascara quando virem do POST. o plugin retira os caracteres invalidos para cada posição. Você tem que ver como a informação está vindo formatada depois do POST e verificar se está em um formato adequado.

      Like

  22. Bom dia Igor.

    Estou utilizando a máscara para telefone com 5 dígitos no prefixo, porém não está funcionando, nem no seu exemplo está.

    poderia dar uma ajuda???

    Outra coisa, no meu caso não tem o ddd, somente o número, como eu mudo o regex???

    Fico no aguardo, obrigado.

    Like

  23. Olá Igor parabéns pelo script estou começando a fazer uso dele aqui e achei fantástico. Tenho uma dúvida preciso usar através do data-mask mas como coloco reverse no data-mask?

    Like

  24. Esse plugin para o jQuery funciona bem nos browsers desktop, mas não funciona no browser nativo do Android anterior a versão 4.4.2 (KitKat).

    Estou desenvolvendo um aplicativo mobile e não funciona no Android 4.1.2, nem no 4.2.1 e nem no 4.0.3. Só funciona mesmo no 4.4.2

    Like

  25. Igor, tudo bom?
    Parabéns pelo trabalho.
    na hora de apresentar a formatacao no formulario no caso telefone, se for 8 digitos funciona normalmente, agora 9 digitos, fica da seguinte forma: (33) 3333-3333?3 com esse ponto de interrogacao, sabe porque?

    Like

  26. Olá, Igor.. parabéns pelo plugin!

    Estou com o mesmo problema que algumas pessoas relataram: incompatibilidade com os browser mobile. No meu caso é somente com o Firefox. Testei no Android 4.4.2 e não consegui. Ele simplesmente embaralha os números quando eu apago e digito novamente. No chrome funcionou.

    Tem alguma ideia de como resolver?

    Abraço!

    Like

  27. Igor, muito interessante seu plugin, porém, senti falta de uma validação quando o campo não é preenchido corretamente. Tem alguma propriedade para fazer essa validação?

    Like

    1. @Alexandre este é um plugin de mascara. Sugiro utilizar um plugin especifico para validação se necessário. De qualquer forma, os callbacks podem ser sempre utilizados para fazer o que quiser 🙂

      Like

  28. Igor o plugin costuma por foco no ultimo elemento “mascarado”. Isso é proposital ou é algum problema? Abraços e parabéns.

    Like

  29. Igor, boa tarde!
    Gostaria de validar a mascara que o meu input está utilizando, como por exemplo, se a máscara que coloquei está realmente preenchida, caso não esteja, gostaria de limpa-la. Valeu

    Like

  30. Salve! Parabens pelo plugin!!! Estou passando por alguns problemas de conflito entre o Jaqueri UI date Picker e a mascara, testei algumas versoes de plugin, versoes do Jquery e versões do DataPicker, porem toda vez que a pagina e carregada com a mascara ( seja de forma encadeada, antes ou depois da chamada do datepicker, ou como atributo da TAG), o calendario aparece aberto com o FOCUS no campo. Esse Bug so para ao retirar a chamada da mascara do campo… VC Ja viu algo assim? ALguem ja passou por isso? Pesquisei no Google porem nao achei nada especifico sobre isso… O maximo foi sobre hierarquia de carregamento… Muito Obrigado! Abs Marcio Loureiro

    Like

  31. Estou com o mesmo problema do: Ewerton on 27 de January de 2014 at 13:41 said:

    Ao enviar um formulário no metódo post, quando eu volto nas setas do browser, tudo vem preenchido exceto o da máscara. Mas o plugin é muito bom. =)

    Like

  32. Bom dia,
    Fantástico o seu plugin, estou com uma dúvida: existe alguma forma de incluir prefixo nas máscaras de moeda? (tipo R$ 1,25)

    Desde já agradeço

    Like

  33. estou com um problema com essa mascara por exemplo se eu tenho um campo que utiliza ela mas esse campo não é obrigatário , eu não consigo apagar via javascpt , por exemplo eu tenho um botão cancelar que limpa todos os campo os que estão com a mascara só some o primeiro digito como que eu resolvo isto?

    Like

  34. Olá Igor. Parabéns pelo plugin. O problema com mobile continua. Estou desenvolvendo um app e no campo de telefone não posso deixar text se não o keyborad não muda pra numérico. E com type number o plugin não ta criando as máscaras.

    Like

    1. @Gregory o campo do tipo NUMBER é controlado pelo browser e ele não deixa entrar NADA no campo que não seja numero por isso a mascara não funciona. O plugin só funciona para campos do tipo TEXT.

      Like

  35. Achei muito bom o trabalho. Mas deixo uma pergunta, e talvez uma possivel implemnetação, se assim vc desejar:
    numeros pq nao receber da direita pra esquerda , e no parametro reverso faria o inverto?
    e no caso de valores, pq nao receber sobre a virgula, podendo ir para as decimais qdo eu solicitar ?

    Like

  36. Igor, boa tarde;
    Seu plugin é ótimo, estou usando ele em um sistema que estou desenvolvendo. Este sistema é o meu primeiro, pois não sou muito experiente.
    No meu sistema tenho alguns campos que estou adicionando dinamicamente, linha a linha com uma função jquery que usa a append em uma variável que contem a estrutura da linha que quero adcionar. A mascara funciona na primeira linha que está no meu form, mas quando solicito a adição de mais linhas ele já não funciona. tem algo que eu possa estar fazendo de errado? Pode me dar um help? Abraço. Reinaldo

    Like

  37. Igor

    Tive contato hoje com seu plugin por recomendação de um amigo, ele me parece perfeito e com certeza irei utilizá-lo para meus campo input, voce tem ou recomenda algo para campos output?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: