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.
Danilo é coordenador de interface da AdBat/Tesla, é Corinthiano e Vegan. Gosta de correr, de jogar xadrez, tênis, e futebol de videogame (no futebol de verdade ele é muito ruim). Programa de dia na AdBat/Telsa e de noite no 
December 2nd, 2008 at 7:49 am
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?
December 2nd, 2008 at 9:26 am
Pois é.. não achei nada do tipo, eu ainda tenho que fazer na mão quando é moeda.
December 2nd, 2008 at 1:20 pm
Legal, a questão de não suportar moeda nao resolve o problema. Mas legal a dica, parabéns!
February 18th, 2009 at 11:12 am
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..
April 25th, 2009 at 1:07 pm
o demo nao ta funcionando ou é impressão minha?
May 3rd, 2009 at 11:08 pm
Oi Eduardo, está funcionano sim. É só digitar nos inputs.
[]s
May 22nd, 2009 at 10:31 pm
Muito bom era o que eu precisava valew !!!
July 2nd, 2009 at 11:39 am
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.
July 29th, 2009 at 8:04 pm
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
August 31st, 2009 at 6:00 pm
Opa! legal esta mascara.
Mas vc saberia me dizer se da para colocar esta mascara em campos dinamicos???
January 6th, 2010 at 8:27 pm
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
January 15th, 2010 at 8:49 am
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
April 30th, 2010 at 4:37 pm
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…
May 4th, 2010 at 12:34 pm
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.
May 20th, 2010 at 5:03 pm
Cara Muito Bom!!!
Excelente Plugin…
PARABÉNS!!!!
August 23rd, 2010 at 3:20 pm
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
September 21st, 2010 at 1:14 pm
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″);
});
October 8th, 2010 at 8:59 am
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!!!
arthurciurilli@gmail.com
October 11th, 2010 at 5:11 pm
Boa tarde, tem como colocar essa máscara usando wordpress?
Alencar
October 14th, 2010 at 9:34 pm
Galera para criar máscara para moeda pode usar o maskInputMoney – http://inovaideia.com.br/maskInputMoney/ do jQuery.
Abraço.
October 14th, 2010 at 9:36 pm
Esqueci d mandar um exemplo:
$(document).ready(function() {
$(“#real”).maskMoney({symbol:”R$”,decimal:”,”,thousands:”.”});
});
October 28th, 2010 at 3:53 pm
Mask para campo email tem solução?
December 2nd, 2010 at 6:44 am
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.
December 9th, 2010 at 4:33 pm
Para mascarar moema procura por maskMoney JQuery que tem um que faz isto.
March 9th, 2011 at 2:53 pm
Rapaz,
Muito bom esse post.
Parabéns!
March 15th, 2011 at 5:19 pm
Segui todos os passos mas não estou conseguindo colar as informações dentro da máscara do telefone, alguma sugestão ?
March 21st, 2011 at 2:30 pm
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.
March 21st, 2011 at 2:45 pm
Consegui resolver, a versão http://www.tidbits.com.br/download/jquery.maskedinput-1.1.4.pack.js está com bug, esta release mais recente está funcionando direito http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.js
June 3rd, 2011 at 1:44 pm
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…
June 10th, 2011 at 3:28 pm
Ola, na hora de gravar estes dados no banco, ele só grava os numeros?
July 11th, 2011 at 4:08 pm
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!!!
September 16th, 2011 at 10:23 am
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?
October 1st, 2011 at 7:43 pm
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.
January 10th, 2012 at 11:21 am
Muito bom, valeu mesmo
January 11th, 2012 at 9:58 am
O plugin é bem legal, meu único problema é que ao sair do campo sem preecher totalmente, o que eu digitei é apagado.
January 18th, 2012 at 9:40 am
Estava com dificuldade de encontrar o plugin, muito obrigado conseguir resolver meu problema.