Máscaras para formulário com JavaScript e JQuery

O Masked Input Plugin é um plugin pra JQuery que simplifica bastante o processo de mascarar um campo de formulário. Se você não conhece o JQuery, saiba que se trata de uma biblioteca JavaScript, que na prática, serve para facilitar o desenvolvimento de scripts em JavaScript. Isso quer dizer que o JQuery vai facilitar muito o seu trabalho, ao trabalhar com JavaScript.

Passando pouquissimos parâmetros é possível fazer uma validação em poucos minutos.

Primeiro vai ser necessário baixar dois arquivos:
– jquery.js em http://www.jquery.com
– jquery.maskedinput.js em em http://digitalbush.com/projects/masked-input-plugin

Também existem as versões comprimidas que você pode usar.

Depois é necessário fazer o chamado aos arquivos .js entre as tags <HEAD> e </HEAD> do seu site:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Em seguida você define as características das máscaras. Alguns exemplos:
– Máscara para Data: 99/99/9999
– Máscara para Telefone: (99)9999-9999
– Máscara para CPF: 999.999.999-99

– 9 representa qualquer número, de 0 a 9
– a representa qualquer letra
– * representa qualquer letra ou número

Para utilizar as máscaras exemplificadas acima, é necessário colocar o seguinte código entre as tags <HEAD> e </HEAD>.

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

});
</script>

Lembre-se que será utilizado o id do campo que você quer mascarar. No caso do campo de telefone, utilizamos o id telefone, mas pode ser qualquer outro.

Pronto. Agora é só você criar suas próprias máscaras, da forma que desejar 🙂

Você pode obter mais informações em http://digitalbush.com/projects/masked-input-plugin