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 é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, poker, vendo futebol e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, rails, javascript, xhtml, css, jquery, webstandards, seo, sql, opensocial, etc. E já fez sites para espn, fiat, fila, umbro, fgv, gatorade, petrobras, etc. Veja o 
Belinha agora é arquiteta de informação na RMG Connect, está cozinhando melhor, mas postando cada dia menos... ainda assim, sempre que dá aparece aqui no TidBits para dar seus pitacos sobre desenvolvimento... (Belinha é casada com o Danilo)
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