Blog
Criando Máscaras em campos de formulário com JQuery e MaskedInput
TAGs: Internet
Inicialmente devemos baixar os plug-ins “JQuery”, e “Masked Input”, abaixo os links das paginas de download:
- JQuery - http://jquery.com/download/
- Masked Input - http://digitalbush.com/projects/masked-input-plugin/
Após o download, devemos incluir os plug-ins no cabeçalho da página:
<head>
<script src="jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="jquery.maskedinput.min.js" type="text/javascript"></script>
</head>
Logo fazemos os campos de formulário com seus respectivos “id”:
<form>
Data: <input type="text" name="data" id="data">
CPF: <input type="text" name="cpf" id="cpf">
RG: <input type="text" name="rg" id="rg">
Tel.: <input type="text" name="telefone" id="telefone">
Placa: <input type="text" name="placa" id="placa">
</form>
Para criarmos as máscaras é bem simples, basta tomarmos alguns elementos chaves como variáveis, estes elementos são:
a – representa qualquer caractere alfabético. a – z , A – Z.
9 – representa qualquer caractere numérico: 0 – 9.
* - representa qualquer caractere alfanumérico: a – z , A – Z , 0 – 9.
Com os dados acima, conseguimos montar as máscaras necessárias para os campos que necessitamos, chamando a função “ .mask “ pelo JQuery, como abaixo:
<script>
$(function(){
$("#data").mask("99/99/9999");
$("#cpf").mask("999.999.999-99");
$("#rg").mask("aa-99.999.999");
$("#telefone").mask("(99) 9999-9999");
$("#placa").mask("aaa-9999");
});
</script>
Executando os passos acima, conseguiremos aplicar nos campos as máscaras que desejamos, veja aqui o exemplo , ou baixe o exemplo clicando aqui