Mascarando campos com JQuery
Por que usar máscara?
Por que? É simples. Pra facilitar. Isso mesmo, facilitar. Para tornar o preenchimento de algum formulário de seu site mais fácil, mais rápido de ser preenchido, evitando usar recursos desnecessários do usuário.
Plugins JQuery
O framework JQuery conta hoje com uma vasta quantidade de plugins feita pela comunidade que constantemente contribui com excelentes soluções para melhorar a vida de todos.
O plugin que irei utilizar aqui é o Masked Input Plugin que foi criado justamente para essa finalidade.
A máscara é uma forma de facilitar o preenchimento de formulários, determinando previamente a formatação e o conjunto de caracteres que possuirá tal campo, vou explicar melhor.
O um campo de telefone, por exemplo:
(00) 0000-0000
Este campo possui diversos conjuntos de caracteres, o primeiro conjunto, de dois caracteres numéricos (00) consiste no DDD do usuário, o segundo e o terceiro grupo de quatro caracteres separados por hífen (-) consistem no número do telefone em si tambem numéricos.
Tendo isso em mente, imaginamos que seria muito chato para o usuário digitar caractere por caractere nesse formato bonitinho. Ele provavelmente iria fazer algo assim: 0000000000
Então, utilizando a máscara definimos os diversos conjuntos de caracteres e seu tipo de dados (numéricos no nosso caso) fazendo com que o usuário se preocupe apenas em digitar os números, e o resto o nosso plugin irá fazer.
Na Prática
Primeiramente inclua o arquivo do plugin na sua página:
<script src=”jquery.maskedinput.js” type=”text/javascript”></script>
Após isso apenas chame a função mask para mascarar seus campos, da seguinte maneira:
jQuery(function($){
$(”#date”).mask(”99/99/9999″); // onde #date é o id do campo
$(”#phone”).mask(”(99) 999-9999″);
$(”#cpf).mask(”999.999.999-99″);
});
Eu recomendo que o código acima seja inserido num JavaScript externo e incluido na página onde se deseja utilizar as máscaras, para deixar mais limpo o código.
E pronto, seus campos já vão assumir a máscara definida no parâmetro mask();
Créditos também para Comunidade JQuery Brasil
$(“.raymon”).style.display = “none”;
