Máscaras em formulários WEB com JavaScript e jQuery

[ads2]
Em meio a um projeto me deparei com a necessidade de colocar máscaras em alguns campos de formulários para facilitar a usabilidade e garantir que o usuário preencha o campo de forma correta. Então parti pra pesquisa e encontrei um plugin jQuery bem interessante, veja:

Usando o plugin jQuery Masked Input

O Masked Input é um plugin da biblioteca jQuery que permite a inserção de máscaras em formulário WEB de uma forma bem simples. Ele funciona nos navegadores mais usados atualmente e é gratuito.
Para a implementação do plugin é necessário o uso da biblioteca jQuery, que você pode baixar aqui. Você também pode baixar o Masked Inputs no site oficial do mesmo.
Depois de baixar os arquivos e salva-los na mesma pasta do arquivo HTML, chame-os no arquivo HTML:

Depois crie três campos de texto para que possamos colocar as máscaras:

Pronto, agora para colocar as máscaras faça o seguinte: no head do seu documento HTML abra a tag script e coloque este código javaScript nela:

Veja que você pode definir a máscara da forma que você achar melhor, e pode usar para qualquer tipo de dado que necessite dela. Ao testar o exemplo você vê que o campo de data, por exemplo, fica da seguinte forma: __/__/____. Se acaso você quiser mudar os espaços “_” por outro caractere você pode usar a propriedade placeholder, veja o exemplo:

O plugin também permite que você crie suas próprias definições de máscaras, por exemplo: suponhamos que você tenha um campo onde obrigatoriamente o usuário tenha que informar se o valor é positivo ou negativo, então seria da seguinte forma:

E para facilitar ainda mais sua vida este plugin ainda permite que seja disparado um evento quando o campo for totalmente preenchido, veja o exemplo:

É isso ai galera, até a próxima. Dúvidas, dicas, sugestões ou críticas deixe um comentário.

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

Deixe uma resposta

Seu e-mail não será publicado.