No artigo de hoje vamos aprender um método muito útil e prático para se desenvolver formulários em HTML, na qual utilizaremos máscaras para campos input específicos, podendo ser alguma formatação como RG, CPF, CNPJ, DATA ou aceitar apenas números, apenas letras ou ambos ao mesmo tempo, utilizando apenas a formatação desejada com o Masked Input.

Bem, começamos criando nossa página index, na qual será criado nosso formulário para exemplo. Dentro desse formulário você deve criar campos input com o type=”text” (tipo texto), e atribuir a eles um seletor ID, cada um com seu nome, pois será pelo ID de cada campo que iremos definir nossa mascara especifica para ele.

Veja o exemplo de como deve ficar nosso form em nossa página index:

 <form id="formulario" method="post" action="" > <fieldset> <legend>M&aacute;scara para inputs</legend> <label for="cpf">CPF:</label> <input class="meuform" type="text" id="cpf" /> <br/><br/> <label for="rg">RG:</label> <input class="meuform" type="text" id="rg" /><br/><br/> <label for="tel">Telefone:</label> <input class="meuform" type="text" id="tel" /><br/><br/> <label for="pass">Letra e Num:</label> <input class="meuform" type="text" id="pass" /><br/><br/> <label for="dt">Data:</label> <input class="meuform" type="text" id="dt" /><br/><br/> <label for="lt">Letras:</label> <input class="meuform" type="text" id="lt" /><br/><br/> </fieldset> </form>

Feito nosso formulário e definido os ID de cada campo, vamos adicionar nosso arquivo JQuery dentro das tags HEAD.

 <script type="text/javascript" src="js/1.5.2.js"></script> <script type="text/javascript" src="js/jquery.maskedinput-1.3.min.js"></script>

Pronto, já temos nosso formulário e nosso Jquery, agora vamos criar o JavaScript que será o responsável por fazer a formatação que definiremos.

 <script> jQuery(function($){ $("#cpf").mask("999.999.999-99"); $("#rg").mask("99.999.999-9"); $("#tel").mask("(999) 99999-9999"); $("#dt").mask("99/99/9999"); $("#pass").mask("*******"); $("#lt").mask("aaaaaaaaaaaaa"); }); </script>

Para construir as máscaras temos as seguintes regras:

a – Representa um caractere alfabético (AZ, az)

9 – Representa um carácter numérico (0-9)

* – Representa um caractere alfanumérico (AZ, az ,0-9)

Primeiramente o código começa selecionando o ID do campo $("#ID"), e logo após ele define que tipo de máscara será atribuída a aquele campo, na qual poderá ser numérico, alfabético ou alfanumérico.

Vamos supor que você necessite fazer um campo para que o usuário digite seu CPF certo, e você não quer que ele coloque os dados de qualquer forma, faltando ou sobrando números. Bem há muitas formas de se fazer isso, mas utilizando deste método basta você adicionar $("#cpf").mask("999.999.999-99"); no JavaScript que ele fará exatamente a representação do formato que você estipulou, não permitindo que o usuário digite mais ou menos caracteres.

E lembrando que ao utilizar a máscara (“9”), só será permitido digitar caracteres numéricos, aumentando ainda mais a eficiência e confiança dos dados inseridos, podendo evitar problemas no futuro no Banco de Dados ao realizar buscas mais elaboradas.

Agora vamos supor que você queira um campo que só aceite letras e não permita números, basta você criar um campo com um ID qualquer e colocar no JavaScript sua chamada, por exemplo $("#lt").mask("aaaaaaaaaaaaa"); nesse código o campo com o ID=”lt” só irá ser aceito caracteres alfabéticos ignorando os numéricos.

Lembrando que a máscara (“a”) só permite letras e descarta números.

E para deixar um campo que aceite qualquer tecla do teclado e apenas fique na formatação que você deseja, ou seja, alfanumérico, basta colocar * (asterisco) na formatação, que validará todas as teclas do teclado desta maneira $("#pass").mask("*******");

Para baixar o exemplo completo clique AQUI...

Dúvidas, críticas ou sugestões comentem abaixo e bons estudos. =)