Olá pessoal vamos aprender como colocar mascaras em campos texto de formulários, como por exemplo do CPF 999.999.999-99, CNPJ, PIS, mas isso é só o ato de colocar os pontos e hífens…, não há a validação.
Para “mascarar” os campos inputs, vamos usar um plugin de jQuery chamado Masked Input, o site onde você pode baixar ele é o digitalbush.com, baixem a versão minified, que é a versão compacta do arquivo. Como este plugin é baseado em jQuery você também terá que baixar jQuery neste link jquery.com, baixe a versão production.

Agora vamos vamos realmente começar a trabalhar.
Para usar ele temos que importar estes arquivos na nas páginas que queremos usá-los. Coloque as dias linhas abaixo entre as TAGs .

Código:

<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/JavaScript" src="maskedinput.js"></script>

O que fizemos aqui é indicar aonde está os arquivos que baixamos antes e indicamos que eles não JavaScript, nada de mais até aqui, vamos começar a brincar.
Para criar mascaras é muito simples, vamos montar o HTML primeiro.

Código:

<input type="text" name="cpf" id="cpf" />

Acima criamos um campo texto com o nome (name) cpf e o mais importante, o ID que nomeamos como cpf também. Lembre-se que não é regra colocar o mesmo nome do ID com o name, é apenas para ficar mais legível.
É importante ressaltar que temos que colocar um ID para todos os campos que queremos mascarar.
Vamos começar com um exemplo do CPF. Dentro do vamos colocar o script.

Código:

<script>
    jQuery(function(){
        jQuery("#cpf").mask("999.999.999-99");
    });
</script>

Veja que utilizamos a sintaxe básica do jQuery que é ( jQuery(function($){}); ) e dentro identificamos o ID #cpf, para utilizar o plugin usamos a função mask() que é aonde definimos a mascara. Para definir numero apenas temos que colocar o numero 9, que indica valores numéricos.
Veja que no exemplo do CPF colocamos pontos e hífens que são ignorados e aparecem a penas textual-mente, como na figura abaixo.


Perceba que ao colocarmos o mouse no campo, automaticamente ele coloca os pontos, os hífens e no espaço que o usuário tem que digitar o conteúdo, ele coloca underline’s (_).
Veja também que ele já faz o bloqueio das teclas, permitindo neste caso apenas números (função muito boa).
Faça o teste, é bem simples mesmo. Entendendo isso você pode fazer muita coisa, abaixo vou colocar mais alguns exemplos muito comuns no dia-dia dos programadores.

Código:

jQuery(function(){
    jQuery("#nascimento").mask("99/99/9999");
    jQuery("#cep").mask("99999-999");
    jQuery("#cpf").mask("999.999.999-99");
    jQuery("#cnpj").mask("99.999.999/9999-99");
    jQuery("#telefone").mask("(99) 9999-9999");
    jQuery("#fax").mask("(99) 9999-9999");
    jQuery("#inscricao-estadual").mask("999.999.999.999");
});

Mas e se você não quiser que na hora do usuário digitar o conteúdo apareça underline’s (_), ao invés disso substituir por espaços em branco por exemplo.

Código:

jQuery("#cpf").mask("999.999.999-99", {placeholder:" "});

Veja que o comando placeholder faz justamente isso, muda o preenchimento da mascara do campo.

Também podemos fazer mascaras com letras também, como por exemplo um campo para digitar a placa de um carro, onde os três primeiros caracteres são letras e os outros (4) são números. Para identificar que é uma letra que podemos digitar é utilizado a letra a como também é utilizado o numero 9 para números, vamos ao exemplo.

Código:

jQuery("#placa").mask("aaa-9999");

Bem interessante não é?!

OBS: talvez alguns extraem porque eu coloquei jQuery no lugar de $, que normalmente é o seletor jQuery, mas utilizei isso, para não haver conflito no jQuery.
Sempre que você utilizar jQuery, prefira colocar jQuery no lugar de $.
Por hoje é só pessoal duvidas, elogios ou sugestões é só comentar. Os exemplos online e para download estão logo abaixo, até a próxima.
Demonstração