Campo de Formulário com máscara - Jquery

Saudações amigos, venho hoje apresentar para vocês o plugin : Masked Input Plugin

Isso mesmo, um plugin da Jquery feito para mascarar campos. Sendo assim torna nossas vidas mais fáceis.

Fiz todos os testes no IE e FF ( Perdoem-me os outros browsers ).

Tentei fazer uma tradução de como utilizar com meus “ingrês nas coxas” como diria meu amigo micox!

Mas bem, vamos ao que interessa:
Masked Input Plugin

Este é um plugin ‘mascarador’ de input. Ele é útil para fixar tamanho aos inputs onde os valores seguem um determinado formato.
A máscara é definida por um formato e formada por caracteres de escape. Somento caracteres não contidos na lista de escape serão considerados um caracter da máscara.

Os seguintes caracteres de escape são predefinidos:

  • a - Represents an alpha character (A-Z,a-z)
  • 9 - Represents a numeric character (0-9)
  • * - Represents an alphanumeric character (A-Z,a-z,0-9)

a - Representa letras ( A-Z , a-z);
9 - Representa um caracter numérico (0-9)
* - Representa um caracter alpha numérico (A-Z,a-z,0-9)

Como usar:

Primeiro, inclua o arquivo javascript do plugin.

1 - <script src=”jquery.maskedinput.js” type=”text/javascript”></script>

Depois , chame a função mask para aqueles campos que deseja mascarar.

1.
jQuery(function($){
2.
$(”#date”).mask(”99/99/9999″);
3.
$(”#phone”).mask(”(999) 999-9999″);
4.
$(”#tin”).mask(”99-9999999″);
5.
$(”#ssn”).mask(”999-99-9999″);
6.
});

Opcional, if você desejar executar uma função logo após a máscara ter terminado, você precisa especificar esta função como argumento opcional para o método maskedinput.

1.
jQuery(function($){
2.
$(”#product”).mask(”99/99/9999″,{completed:function(){alert(”You typed the following: “+this.val());}});
3.
});

Você também pode fornecer suas próprias definições para caracteres de “escape”.

jQuery(function($){
$.mask.addPlaceholder(‘~’,”[+-]”);
$(”#eyescript”).mask(”~9.99 ~9.99 999″);
})

Exemplo prático:

Date 99/99/9999
Phone (999) 999-9999
Tax ID 99-9999999
SSN 999-99-9999
Product Key a*-999-a999
Eye Script ~9.99 ~9.99 999

Donwload do Plugin:

http://digitalbush.com/projects/masked-input-plugin

Bem, agora é com vocês..
fuiz….

$(’#vitor_prado’).fadeOut(’slow’);