Utilizando Máscara com jQuery

maio 27, 2014
8 Minutes

Utilizando Máscara com jQuery

by YESbr

Máscaras têm uma função muito interessante para programação. Por exemplo, se no formulário de preenchimento de dados onde um usuário esta fazendo um cadastro online, você não quer que no lugar de CEP ele digite letras, o mesmo vale para telefone etc.

Então criamos para esse campos as máscaras com a ajuda do jQuery. Elas irão impedir que o usuário digite algum caractere não estipulado por você. Caso você decida que um campo só poderá ter letras, o usuário não pode colocar um número, e vice versa.

Para tal, utilizaremos o plugin Masked Input (download do arquivo no final do tutorial).

Ao criarmos o formulário, precisamos definir as propriedades dos campos para saber que tipo de valor ele vai aceitar.

Para isso vamos dividir aqui o código em duas partes, porém isso é para mera didática. Na primeira parte do código, vamos chamar o jQuery e o plugin Masked Input. Vamos também indicar quais são os campos do formulário e suas respectivas máscaras:

<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>Criando máscaras com jquery</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript" src="jquery.maskedinput.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
$("input.data").mask("99/99/9999");
 
$("input.cpf").mask("999.999.999-99");
 
$("input.cep").mask("99.999-999");
 
});
 
</script>

Considerando a linha $(“input.data”).mask(“99/99/9999”):

Isso significa que os dados neste campo (input com a classe “data”, como indicado entre aspas) vão seguir uma ordem aparecendo no formato de data, ou seja, dias, meses e anos.

Neste exemplo usamos apenas números, porém temos ainda outros parâmetros que podemos usar com:

a – Representa qualquer letra (A-Z,a-z)
9 – Representa qualquer número (0-9)
* – Representa qualquer caractere alfanumérico (A-Z,a-z,0-9)

A segunda parte de nosso código, nós temos o formulário com os campos que iremos colocar os dados(inputs).

<body>
 
<h1>Usando máscaras com jquery</h1>
 
<label for="data">Data:</label><br>
 
<input type="text" class="data" id="data" name="data" /><br><br>
 
  
 
<label for="cpf">CPF:</label><br>
 
<input type="text" class="cpf" id="cpf" name="cpf" /><br><br>
 
  
 
<label for="cep">CEP:</label><br>
 
<input type="text" class="cep" id="cep" name="cep" /><br><br>
 
  
 
</body>
 
</html>

Nesta parte oque fizemos foi criar os campos de Data de CPF e de CEP, para que eles buscassem no começo da página para que cada input tivesse as regras para seguir.

O código completo de nossa página ficou assim:

<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>Criando máscaras com jquery</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript" src="jquery.maskedinput.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
$("input.data").mask("99/99/9999");
 
$("input.cpf").mask("999.999.999-99");
 
$("input.cep").mask("99.999-999");
 
});
 
</script>
 
<body>
 
<h1>Usando máscaras com jquery</h1>
 
<label for="data">Data:</label><br>
 
<input type="text" class="data" id="data" name="data" /><br><br>
 
  
 
<label for="cpf">CPF:</label><br>
 
<input type="text" class="cpf" id="cpf" name="cpf" /><br><br>
 
  
 
<label for="cep">CEP:</label><br>
 
<input type="text" class="cep" id="cep" name="cep" /><br><br>
 
  
 
</body>
 
</html>

Confira uma exemplo funcionando.

Arquivos utilizados neste tutorial:

jQuery v1.7.1

Plugin Masked Input