HTML

Em por

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.

máscara para campos 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.

Caso deseje um gerador de CPFs válidos para teste, veja nosso artigo: Gerador de Cpf para testes.

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. wink

Veja Também:

Artigos Relacionados a categoria: HTML

Olá, deixe seu comentário para Máscara para campos Input com Jquery

Já temos 2 comentário(s). DEIXE O SEU :)
jose soares

jose soares

muito bom parabens!
gostaria de saber se tem como formatar o telefone
hoje em dia pode variar em (xx)99999-9999
ate
(xx)9999-99
mas nunca sabemos quando o cliente vai digitar um ou outro. no caso desse inputmaked jquery ele nao aceita o cliente digitar um espaco no lugar do digito a mais, que eh bem no meio do numero.
abradecimentos
abracos
★☆☆☆☆ DIA 16.08.15 16h08 RESPONDER
N/A
Enviando Comentário Fechar :/
Daniel Buche

Daniel Buche

Aqui tem um código bom também, talvez ajude (Máscara genérica para campos numéricos em JavaScript: http://goo.gl/otlbMl)
★☆☆☆☆ DIA 05.10.15 17h10 RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

...AINDA NÃO VIU NOSSO PORTFÓLIO?

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora