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