Pinceladas da WebTutoriais sobre: XHTML, CSS, JavaScript e WebStandards

Para criar máscaras com jQuery, iremos usar o plugin Masked Input, com apenas uma linha de código podemos criar qualquer tipo de máscara.

Para começar, caso não tenha o jQuery, faça o download do mesmo, após isso pegue o Masked Input, e apenas inclua-los em sua página.

Agora vamos criar as máscaras que precizamos.

jQuery.noConflict();
(function($) {
$(function() {
$('.mask-data').mask('99/99/9999'); //data
$('.mask-hora').mask('99:99'); //hora
$('.mask-fone').mask('(999) 999-9999'); //telefone
$('.mask-rg').mask('99.999.999-9'); //RG
$('.mask-ag').mask('9999-9'); //Agência
$('.mask-ag').mask('9.999-9'); //Conta
});
})(jQuery);

Repare que estou setando as máscaras para “classes”, no site do autor é usado “ids”, mas isso não é muito legal, caso tenha dois campos de telefone numa mesma página, teriamos que mecher no javascript, pois não pode haver “id” repetidos na mesma página.

Agora pra implemetar as máscaras é só incluir as classes setadas nos inputs dos formulários.

<input type="text" name="fone1" class="mask-fone" />
<input type="text" name="fone2" class="mask-fone" />
<input type="text" name="rg" class="mask-rg" />
<input type="text" name="cpf" class="mask-fpc" />

E pronto, já esta funcionando, repare que caso você erre, é possível alterar sem ter que apagar tudo, geralmente algumas máscaras, como a do Banco do Brasil, não deixa editar pelo meio do campo, temos que apagar e digitar tudo de novo, se não tudo que for digitado vai para o final do campo.

Para facilitar, recomendo colocar o código que gera as máscaras no final do código do plugin, sim no mesmo arquivo, assim você não precisa ficar refazendo, e é só incluir e usar.