Criando máscara de entrada em formulários com Masked Input e jQuery

Este plugin que funciona em conjunto com a biblioteca jQuery permite a aplicação de uma máscara de entrada para campos de formulário do tipo input, esta técnica fornece uma solução elegante para introduzir dados em campos de texto, como data, CPF, número de telefone, etc.

A máscara torna a entrada de dados mais fácil e ainda serve para controlar os valores que os usuários podem inserir em um campo de texto, evitando que o usuário digite texto onde o correto seria número.

Primeiro você deve incluir a chamada para a biblioteca jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Depois inclua a chamada do plugin Masked Input. Perceba que o nome jquery.maskedinput é o nome do arquivo do plugin e js a extensão que indica ser um arquivo JavaScript.

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

Caracteres chaves para criar as máscaras

Evitando conflito com outras biliotecas

Uma das razões que tornam a biblioteca jQuery uma das mais populares é a capacidade de adição de plugins. O problema é que todos eles usam $ como nome principal para chamar suas funcionalidades podendo, ocasionar algum tipo de conflito.

Para resolver esses problema utilizamos a função jQuery.noConflict().

Usando o plugin Masked Input

Depois de tudo pronto chamamos a função de máscara para os itens que você deseja. No exemplo utilizamos #data, #telefone, #cpf, #cep, #cnpj e #placa que são respectivamente os id’s dos campos a serem mascarados

<script type="text/javascript"> 
jQuery.noConflict();
jQuery(function($){
   $("#data").mask("99/99/9999");
   $("#telefone").mask("(099) 9999-9999");
   $("#cpf").mask("999.999.999-99");
   $("#cep").mask("99999-999"); 
   $("#cnpj").mask("99.999.999/9999-99");
   $("#placa").mask("aaa - 9999"); 
});
</script> 

Se você não estiver satisfeito com o caractere underscore (‘_’) como um espaço reservado, você pode passar um argumento opcional para o método maskedinput.

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Veja nessa página de demonstração o plugin funcionando.

Abaixo um vídeo do plugin Masked Input