Muito importante para os sites atuais, a máscara é usada para orientar o usuário a fazer a entrada correta dos dados antes de envia-los via formulário. Para esse tipo de trabalho, o jQuery possui um plugin especial (masked input plugin), que atribui as máscaras conforme configuradas pelo desenvovedor.

O primeiro passo é adicionar o jQuery e o Plugin no head do site conforme abaixo:

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

Depois de adicionado o jQuery e o Plugin, deve-se configurar o plugin com as classes e máscaras que serão utilizadas, tudo isso dentro de uma chamada jQuery. Pode ser feito no head após as chamadas dos scripts, ou seguindo as recomendações no footer.

  $("#data").mask("99/99/9999");
  $("#fone").mask("(999) 999-9999");
  $("#cep").mask("99999-999");
  $("#cpf").mask("999.999.999-99");
  $("#cnpj").mask("99.999.999/9999-99");

Note que os campos que forem configurados, as máscaras apareceram com as barras ou hifens e com o underline como marcação onde irão os caracteres (placeholder).

Os caracteres aceitos pelo plugin são os seguintes:

• a – Representa um carácter alpha numérico (A-Z,a-z)
• 9 – Representa um carácter numérico (0-9)
• * – Representa um carácter alpha numeric character (A-Z,a-z,0-9)