Hoje é o lançamento oficial da versão 0.4.3 do meu plugin jQuery Mask Plugin. Como nunca falei sobre ele aqui no blog, vou ensinar vocês como utiliza-lo e algumas features bacanas do plugin.
Baixando o código
wget https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/jquery.mask.min.js
A única coisa que vocês precisam fazer é incluir o plugin entre as tagsedo seu documento e pronto, o plugin está pronto para vocês utilizarem.
A sintaxe
A sintaxe do jQuery Mask Plugin é bem simples. Primeiro você passa o seletor, seguido de .mask e como parametro você vai passar a mascara que você quer que o campo tenha.
Exemplo
$(document).ready(function(){
$('.date').mask('00/00/0000');
});
Neste exemplo, todos os input fields que possuem a classe “.date”, a mascara será aplicada. No jQuery Mask Plugin você não tem mascaras pré-estabelecidas. Você escolhe a mascara como você quiser. no site do projeto vocês podem ver o jQuery Mask Plugin funcionando e mais alguns outros exemplos, como os a seguir:
$(document).ready(function(){
$('.date').mask('11/11/1111');
$('.time').mask('00:00:00');
$('.date_time').mask('00/00/0000 00:00:00');
$('.cep').mask('00000-000');
$('.phone').mask('0000-0000');
$('.phone_with_ddd').mask('(00) 0000-0000');
$('.phone_us').mask('(000) 000-0000');
$('.mixed').mask('AAA 000-S0S');
$('.cpf').mask('000.000.000-00', {reverse: true});
$('.money').mask('000.000.000.000.000,00', {reverse: true});
});
Veja que que eu posso definir o tipo de dado que o usuário pode imputar a cada dígito. Nesta máscara por exemplo:
$('.mixed').mask('AAA 000-S0S');
O usuário poderá digitar uma sequência de 3 caracteres alpha números, seguido de espaço, seguido de 3 caracteres números, seguido de traço, seguido de um caractere do tipo string, seguido de um caractere do tipo inteiro e seguido de um caractere do tipo string, legal, né?
Vocês podem definir a mascara como quiserem e também podem definir o tipo de dado que pode ser inputado em cada dígito da mascara.
Features
- Lightweight (~2kb minified, ~1kb gziped).
- Mascaras em qualquer elemento HTML.
- suporte ao attribututo data-mask.
- Mascaras com String/Numeros/Alpha-Numéricos/Mixed.
- Suporte a mascara reversa para campos numéricos.
- Sanitização.
- Digitos Opcionais.
- maxlength Automático.
- Inicialização de mascara avançada.
- Callbacks.
- Mudança de mascara On-the-fly.
- Remoção da mascara.
- Customização.
- Compatibilidade com Zepto.js
Mais sobre o jQuery Mask Plugin
- jQuery Mask Plugin no Github
- Página de demonstração
- Source-Code do jQuery Mask Plugin
- Todas as versões do jQuery Mask Plugin
Qualquer problema, por favor, me avisem.
AJUDOU? AJUDE NO DESENVOLVIMENTO DO JQUERY MASK PLUGIN
