Plugin de Máscara de formulários para JQuery – Masked Input


Se trata de um plugin bem simples e pequeno (2.8kb) de jquery pra fazer máscaras nos inputs de um formulário, como cpf, cnpj, telefone, cep, etc…

Pra usar é bem simples, faça download dos arquivos :

JQuery 1.2.6, versão pack e
Masked Input-1.1.4, versão pack

e chame-os dentro do HEAD da sua página :

<head>
    <title> título do site </title>
    ...
    <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="js/jquery.maskedinput-1.1.4.pack.js"/></script>
</head>

Para aplicar a máscara, as regras são simples:

a – Representa qualquer letra (A-Z,a-z)
9 – Representa qualquer número (0-9)
* – Representa qualquer caractére alfanumérico (A-Z,a-z,0-9)

Veja os exemplos

<script type="text/javascript">
	$(document).ready(function(){
		$("#telefone").mask("9999-9999");
		$("#cpf").mask("999.999.999-99");
		$("#cep").mask("99999-999");
		$("#data").mask("99/99/9999");
	});
</script>

Depois só faça o html normalmente e veja como ficou preenchendo o formulário:

:

:

:

:

A documentação completa do plugin se encontra aqui.

49 thoughts on “Plugin de Máscara de formulários para JQuery – Masked Input

  1. Legal seu artigo….
    so que achei esse plugin da JQuery
    meio vago… ele podia ter uma forma de mascarar somente numeros, monetario, caracteres apenass… sei la não vi nenhum exemplo que tivesse isso…
    sera que existe?

  2. Legal, a questão de não suportar moeda nao resolve o problema. Mas legal a dica, parabéns!

  3. e como uso o atributo value? eu defino o atributo value=”1111″ por exemplo mas ele limpa o campo, para edição de registro n tem como usar este plugin?? pois ele limpa td..

  4. Show de bola Danilo!!

    Funcionou perfeitamente.

    Gostei muito.
    Obrigado Cara.

    Coloca o Adsense no Blog. Nada mais justo do que dar umas clicadas em agradecimento.

  5. galera, dizem que o CSS 3, tem funçoes simples pra esse tipo de validaçao. ainda nao verifiquei, mais vou ver ainda.
    abraços

  6. Opa! legal esta mascara.
    Mas vc saberia me dizer se da para colocar esta mascara em campos dinamicos???

  7. Parabêns ao casal por compartilhar conhecimento. É ensinando que aprendemos mais ainda e estaremos sempre a frente. Ajudando o nosso meio a crescer e se desenvolver, estamos também ampliando nossos terrenos.

    Continuem

  8. Muito boa esta solução de mascaras com Jquery. A Codificação da página fica mais clara. Muito bom o artigo. Para complementar as informações sobre mascara em caixas de texto, segue o link de uma solução em Jquery para valores monetários:
    http://github.com/plentz/jquery-maskmoney

  9. Não gostei muito do plug-in…
    No firebug ele gera warning se você navegar entre os input’s com TAB.

    Sem contar que ele é incompatível com o plugin jQuery validate. Gera um loop nos inputs…

  10. Descobri que não é incompatibilidade…é do próprio jQuery Masked Input

    Se você navegar usando a tecla tab de vez em quando ele fica em looping nos campos. Isso ocorre com mais frequência IE, mas acontece no FF também.

  11. oww..
    alguem ai tem um de valor monetario..???
    eu nao consegui fazer um…
    eu fiz esse
    $(“#real”).mask(“R$ 999,99”);

    mas esta meio feio..
    ela nao aceita se nao estiver os campos preenchidos..
    alguem ai ajuda?

    vlww

  12. Deu errado vu movei, só funcionou quando eu coloquei:

    jQuery(function($){
    $(“#telefone”).mask(“99-9999-9999”);
    $(“#cpf”).mask(“999.999.999-99”);
    $(“#cnpj”).mask(“99.999.999/9999-99”);
    $(“#cep”).mask(“99999-999”);
    $(“#data”).mask(“99/99/9999”);
    $(“#hora”).mask(“99:99”);
    });

  13. Olá pessoal!!!

    Legal Obrigado!!!

    Teve uma pessoa acima que disse que não tinha o de moeda, esse eu uso em asp net C# mas da para adaptar para outras linguagens segue o exemplo:

    function mascara(e, src, mask) {
    if (window.event) {
    _TXT = e.keyCode;
    } else
    if (e.which) {
    _TXT = e.which;
    }
    if (_TXT > 47 && _TXT < 58) {
    var i = src.value.length;
    var saida = mask.substring(0, 1);
    var texto = mask.substring(i);
    if (texto.substring(0, 1) != saida) {
    src.value += texto.substring(0, 1);
    }
    return true;
    } else {
    if (_TXT != 8) {
    return false;
    } else {
    return true;
    }
    }
    }

    Moeda:

    <input type="text" name="preco" value="" size="12" maxlength="14" onkeypress="return mascara(event,this,'##.##.###.####');"

    Abraços fiquem com Deus!!!

    [email protected]

  14. Esqueci d mandar um exemplo:

    $(document).ready(function() {

    $(“#real”).maskMoney({symbol:”R$”,decimal:”,”,thousands:”.”});

    });

  15. muito bom o post sobre mascara. Realmente o jquery facilita e muito a nossa vida tornando as aplicacoes mais claras e avancadas. Parabens pelo post. Continue assim.

  16. Segui todos os passos mas não estou conseguindo colar as informações dentro da máscara do telefone, alguma sugestão ?

  17. Está dando um erro quando coloco um número fixo. Ex.:

    – O número 2 será fixo:

    9999-2-9999

    – quando digito no campo:

    1111-2-1111

    – após eu retirar o foco do campo ele automaticamente troca os valores para:

    1111-2-2111

    – se volto a colocar o foco no campo, ele muda denovo para:

    1111-2-2211

    e assim por diante, até o último número, até ficar:

    1111-2-2222

    Será que alguém saberia me explicar o porque pf. Se eu conseguir resolver esse problema antes posto aqui, valew pelo galera.

  18. Galera, gostaria de saber se alguem sabe de alguma máscara para e-mail.
    Tipo, o usuário preenche um formulário, e se o campo não estiver preenchido ou estiver incompleto, ele retorna uma mensagem para que o mesmo seja corrigido.
    Consegui para telefone, cpf e tals, mas e-mail não… gradeceria muito se alguem conseguisse me ajudar…

  19. Ola, na hora de gravar estes dados no banco, ele só grava os numeros?

  20. Contribuindo com o post….

    Para focar automaticamente o proximo campo após ser preenchido, é só fazer assim:

    $(“#cpf”).mask(“999.999.999-99”,{completed:function(){
    var camp = document.getElementById(“telefone”);
    camp.focus();
    }});

    Espero ter ajudado!!!

  21. Bom dia, quando utilizo a masacara para datas, tudo funciona como indicado acima, porém sería útil, que não se permitisse digitar dias maiores que 30 e meses maiores que 12, alguém sabe uma função para resolver isso?

  22. Quando li o artigo, imaginei que fosse mais uma daquelas soluções que nunca funcionam… Funcionou e muito bem. A única ressalva é que, para atender aos usuários mais neófitos (como eu), o autor deveria especificar mais detalhadamente onde descarregar os 2 arquivos javascript (plugins) após o download. No mais, está ótimo. Muito obrigado.

  23. O plugin é bem legal, meu único problema é que ao sair do campo sem preecher totalmente, o que eu digitei é apagado.

  24. Estava com dificuldade de encontrar o plugin, muito obrigado conseguir resolver meu problema.

  25. Como eu implemento esta máscara no meu formulário html, gostaria de saber como eu chamo a máscara jquery no meu form html, eu tentei fazer mas não consegui, isso é para o meu tcc se puder ajudar ficarei muito grato

  26. Funciona na primeira vez que submeto os dados, quando volta para a página perde a máscara.
    Alguem pode me ajudar???

  27. gostaria de saber se tem como fazer de uma placa de carro ex KZB-9945 se tem com ficaria a mascara

  28. Achei muito interessante este artigo, infelizmente meu conhecimento em programação e um pouco baixo gostaria de saber como posso fazer para implementar este plugin no gravity-forms para wordpress. Onde devo colocar as chamadas de biblioteca Jquery ? Agradeço antecipadamente, será de muita ajuda se alguém puder me explicar isto com detalhes. Grato.

  29. Bom dia…

    Mt. bom mesmo, mas teria uma mascara só para letras MAIÚSCULAS..

  30. Caro Danilo, seu plugin me ajudou bastante, obrigado.
    Gostaria de saber se ele serve apenas para campos com tamanho fixo rg, cpf etc. Ou também para campos de tamanho variável por exemplo nomes de pessoas?
    Eu preciso que no campo nome seja digitado apenas letras entende?

  31. Apesar da pergunta do Eduardo ter sido feita em janeiro.. “O plugin é bem legal, meu único problema é que ao sair do campo sem preencher totalmente, o que eu digitei é apagado.” Basta colocar uma interrogação para resolver isso ;) exemplo: $(“#MainContent_TextBoxCep”).mask(“?99999-999”);

  32. Alguém mais teve problema pra usar isso no joomla? no chrome funciona perfeito, mas no firefox não

  33. Essa solução foi muito útil pra mim. Pois eu procurava uma máscara que funcionasse no bendito IE. Esse navegador era o único que não reconhecia o plugin que eu tinha em mãos. Mas com esse daí funfou perfeito !!! Parabéns e Obrigado.

Leave a Reply

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