Mascara para formulários em JQuery

Publicado em 26 de maio de 2011 - No site: jquerymagazine.com.br

Olá Pessoal,
Neste  artigo vamos ver como colocar máscara em campos do seu formulário, usando jQuery, e o plugin maskedinput.

Vamos utilizar o jQuery na página e o plugin maskedinput.
Aproveito para agradecer as pessoas que estão dando força, seja por e-mail, twitter como nosso amigo Rodrigo Costa, e aqueles que seguem a @jqmagazine.

Importamos nossa biblioteca jQuery e o plugin

<script language="JavaScript" src="jquery-1.6.1.min.js" type="text/javascript"> </script> <script language="JavaScript" src="jquery.maskedinput-1.3.js" type="text/javascript"></script>

Script jQuery

<script> jQuery(function($){ $("#telefone").mask("(99) 9999-9999"); $("#cep").mask("99999-999"); $("#data").mask("99/99/9999"); $("#cpf").mask("999.999.999-99"); $("#cnpj").mask("99.999.999/9999-99"); }); </script>

Nosso formulário

<form method="post"> <code>Telefone: <input id="telefone" name="telefone" type="text" /> CEP: <input id="cep" name="cep" type="text" /> Data: <input id="data" name="data" type="text" /> CPF: <input id="cpf" name="cpf" type="text" /> CNPJ: <input id="cnpj" name="cnpj" type="text" /> </code></form>

Primeiramente é feita a inclusão dos arquivos javascript, coloquei o link para que vocês possam fazer o download.
Depois criarmos a função para criar a mascara, notem que passei a forma que o campo irá ser formatado, sempre com número máximo 9.
Depois criamos um simples formulário, mas em cada campo, precisamos referenciar a ID, para a nossa função saber qual campo ele está formatando.

Veja um exemplo aqui:

Espero que tenha sido útil e não esqueça de seguir este BLOG! :)