Mascaras com jQuery Mask Plugin

Posted on 13 de March de 2012 by Igor Escobar

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('99/99/9999 00:00:00');
  $('.cep').mask('99999-999');
  $('.phone').mask('9999-9999');
  $('.phone_with_ddd').mask('(99) 9999-9999');
  $('.phone_us').mask('(999) 999-9999');
  $('.mixed').mask('AAA 000-S0S');
});

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

Validação de tipo de dado inputado.
Mascaras flexíveis.
Live Events para aplicações Ajax.
Maxlength automático.

Mais sobre o jQuery Mask Plugin

Qualquer problema, por favor, me avisem.

Igor Escobar

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

Be Sociable, Share!

Posts Relacionados:

30 thoughts on “Mascaras com jQuery Mask Plugin”

Alan Nogueira on 22 de March de 2012 at 15:26 said:

Excelente funcionalidade, muito bom e simples. Obrigado Jquery por existir.
Marcelo Duarte on 26 de April de 2012 at 16:06 said:

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.
Igor Escobar on 26 de April de 2012 at 18:19 said:

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’);
Wellington Zomer Nunes on 25 de June de 2012 at 9:22 said:

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…
Igor Escobar on 25 de June de 2012 at 10:04 said:

@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.
Suellen on 29 de June de 2012 at 15:08 said:

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.
Igor Escobar on 29 de June de 2012 at 15:59 said:

Vou postar como ficaria a solução da forma que é possível HOJE. Mas o que você procura, dígitos opicionais, ainda não foi implementado :/
Pingback: Mascara Javascript para os novos telefones de São Paulo | Igor Escobar
Alessandro on 3 de August de 2012 at 21:27 said:

Não consegui fazer funcionar… tem como disponibilizar um .zip com uma pagina de exemplo ?? ou o código da pagina de ex. ..
Igor Escobar on 3 de August de 2012 at 22:38 said:

No próprio post tem vários links úteis para começar, Alessandro
Mas aqui vai: http://igorescobar.github.com/jQuery-Mask-Plugin/
Alessandro on 4 de August de 2012 at 9:49 said:

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
Igor Escobar on 4 de August de 2012 at 17:34 said:

@Alessandro
Cria um jsfiddle com o código que eu tento te ajudar
Igor Escobar on 6 de August de 2012 at 9:56 said:

@Marcelo
Com a versão nova tem um metodo remover a mascara!
ex: $(‘.phone’).data(‘mask’).remove();
Alan on 7 de August de 2012 at 15:45 said:

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!
Igor Escobar on 7 de August de 2012 at 15:58 said:

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!
Igor Escobar on 7 de August de 2012 at 22:09 said:

@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.
Igor Escobar on 8 de August de 2012 at 0:42 said:

Depois de pesquisar MUITO! no final das contas, é um bug do browser.
http://code.google.com/p/android/issues/detail?id=15245

Em todos os outros navegadores mobile que testei funcionou, menos no nativo do Android.
Alan on 17 de August de 2012 at 9:15 said:

Vish cara, que pepino!!!

Beleza Igor, muito obrigado pela atenção e sucesso!!!
Tiago Machado on 15 de January de 2013 at 14:42 said:

Olá, Igor. Parabéns pelo plugin.

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

Obrigado.
Igor Escobar on 15 de January de 2013 at 15:26 said:

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.
Mario on 22 de January de 2013 at 16:54 said:

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?
Igor Escobar on 22 de January de 2013 at 16:56 said:

@Mario
É mais fácil você criar um jsfiddle exemplificando o conflito, fica até mais fácil para eu debugar.
Eduardo "Trialforce" Bonfandini on 11 de March de 2013 at 14:51 said:

Obrigado pelo ótimo componente!
Gilson on 4 de April de 2013 at 8:45 said:

Bom Dia Igor Escobar,

Necessito referenciar algo no formulário para que ele pegue as mascaras?

Obrigado
Igor Escobar on 4 de April de 2013 at 8:57 said:

@Gilson Pode elaborar um pouco mais a sua pergunta?
Fernando Macedo on 4 de April de 2013 at 11:09 said:

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
Igor Escobar on 4 de April de 2013 at 11:20 said:

@Fernando Macedo
Já tentou usar o live para aplicar a mascara?
Igor Escobar on 4 de April de 2013 at 11:22 said:

Ex: $(document).on(“click”, “.form-field”, function(){ $(‘.form-field’).mask(’00/00/0000′); });
Daniel Costa on 11 de April de 2013 at 17:14 said:

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)
Fernando on 25 de April de 2013 at 10:33 said:

Parabéns pelo componente, me ajudou muito. obrigado