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