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/jquery.mask.min.js 

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

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

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

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:

$(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});
});

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:

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

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

Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !

software engineer @ grupo abril, #javascript #nodejs #ruby #php #zce #musician #skater

Twitter LinkedIn 

Be Sociable, Share!

Posts Relacionados:

73 thoughts on “Mascaras com jQuery Mask Plugin

  1. 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?

  2. @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.

  3. 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.

  4. 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?

  5. 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

  6. 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?

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

  8. 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?

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

  10. 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

  11. @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 :)

  12. @Adolfo estou na correria para tentar resolver isso para vocês. A v1.6.0 deu uma melhorada, mas não sei se corrigiu a versão 4.4.2. O tempo é curto!

  13. 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

  14. 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. =)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>