Aplicando máscaras a campos de formulários com plugin jQuery

Ao se preencher um formulário, nada mais desagradável ter que descobrir a forma padrão da entrada. Para evitar que usuários de seus sistemas tenha essa má experiência, uma boa opção é utilizar um plugin desenvolvido em jQuery chamado Masked Input Plugin. Sua instalação é bastante simples e requer apenas conhecimentos básicos de HTML e JavaScript. A seguir será mostrado como é feita a instalação e alguns exemplos de sua utilização. 

A princípio, é necessário fazer a importação das bibliotecas jquery.js e maskedinput-1.3.js (ou maskedinput-1.3.min.js). Abaixo um exemplo de como deve ser feito a inclusão desses arquivos em seu projeto. 

 
1
2
3
4
5
6
7
8
<head>
 
<script src="jquery.js" type="text/javascript"></script>
<script src="maskedinput-1.3.js" type="text/javascript"></script>
 
    // ...
 
</head>
 

Obs: é preciso verificar o caminho dos arquvos .js e corrigi-lo se for necessário. Abaixo exemplos de como definir as máscaras para diversos tipos de entrada.

 
1
2
3
4
5
6
7
8
9
<form>
       Telefone: <input type="text" id="telefone" />
       CEP:        <input type="text" id="cep" />
       Data:        <input type="text" id="data" />
       CNPJ:      <input type="text" id="cnpj" />
       RG:           <input type="text" id="rg" />
       Agência:   <input type="text" id="agencia" />
       Comta:     <input type="text" id="conta" />
</form>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
 
    jQuery(document).ready(function($) {
 
            $("#telefone").mask("(99) 9999-9999");     // Máscara para TELEFONE
 
            $("#cep").mask("99999-999");    // Máscara para CEP
 
            $("#data").mask("99/99/9999");    // Máscara para DATA
 
            $("#cnpj").mask("99.999.999/9999-99");    // Máscara para CNPJ
 
            $('#rg').mask('99.999.999-9');    // Máscara para RG
       
            $('#agencia').mask('9999-9');    // Máscara para AGÊNCIA BANCÁRIA
 
            $('#conta').mask('99.999-9');    // Máscara para CONTA BANCÁRIA
 
    });
 
</script>
 

Para construir as máscaras temos as seguintes regras:

a – Representa um caractere alfabético (AZ, az); 
9 – Representa um carácter numérico (0-9); 
* – Representa um caractere alfanumérico (AZ, az ,0-9).

Opcionalmente, se desejar substituir o caracter padrão ("_") inserido na espera da entrada do usuário,  é só para como segundo parâmetroplaceholder.

 
1
2
3
4
5
jQuery(document).ready(function($){
 
     $("#data").mask("99/99/9999", { placeholder: " " } );
 
});
 

Se ainda desejar executar uma função assim que a máscara for completada, é só especificá-la como segundo argumento.

 
1
2
3
4
5
jQuery(document).ready(function($) {
 
    $("#data").mask("99/99/9999", { completed: function() { alert("Você digitou: " + this.val() ); } });
 
});
 

Você também pode obrigar alguns caracteres como no exemplo abaixo.

 
1
2
3
4
5
6
jQuery(document).ready(function($) {
 
   $.mask.definitions['~'] = '[ +- ]';
   $("#valor").mask("~999,99");
 
});
 

É possível ainda ter parte de sua máscara como opcional. Tudo que estiver depois de caracter "?" será considerado uma entrada opcional. No exemplo abaixo, pode-se pensar em uma entrada de telefone e o ramal (x99999) sendo opcional.

 
1
2
3
4
5
jQuery(document).ready(function($) {
 
   $("#telefone").mask("(99) 999-9999? x99999");
 
});

 

Fonte: http://www.duocriativa.com.br/janela/blog/2012/06/10/aplicando-mascaras-a-campos-de-formularios-com-plugin-jquery

.