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();

Download do Plugin

Download do Framework JQuery

Site oficial JQuery

Créditos também para Comunidade JQuery Brasil 

$(“.raymon”).style.display = “none”;