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:

$(document).ready(function(){
	$('#data').mask('99/99/9999'); //Máscara para Data
	$('#telefone').mask('(99)9999-9999'); //Máscara para telefone
	$('#cpf').mask('999.999.999-99'); //Máscara para CPF
})

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:

 $('#data').mask('99/99/9999',{placeholder:" "});

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:

$.mask.definitions['~']='[+-]'; //Os valores entre [] são os únicos aceitos no campo da máscara
$("#valor").mask("~999");       

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:

$('#telefone').mask('(99)9999-9999',
{completed:function(){alert("Telefone: "+this.val());}});

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

Jayr Alencar

Doutorando em Ciências da Computação no Centro de Informática da Universidade Federal do Pernambuco (CIn - UFPE); Mestre pela mesma instituição; Formado em Análise e Desenvolvimento de Sistemas; Católico; Fã de O Senhor do Anéis.

Você pode gostar...

1 Resultado

  1. Rafael Lopes disse:

    Tem alguma forma de corrigir o bug quando a máscara possui hífen pelo android? Estou usando uma máscara de CEP e quando chego no sexto digito, o input adiciona o hífen e o número, porém o cursor fica atrás do número.

    Isso só ocorre no android.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *