Recentemente o Igor Scobar lançou oficialmente a versão 0.2.5 do seu plugin jQuery Mask Plugin. Vou ensinar vocês como utiliza-lo e algumas features bacanas do plugin.
Baixando o código
A única coisa que vocês precisam fazer é incluir o plugin entre as
tags <head> e </head> do 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('99/99/9999 00:00:00'); $('.cep').mask('99999-999'); $('.phone').mask('9999-9999'); $('.phone_with_ddd').mask('(99) 9999-9999'); $('.phone_us').mask('(999) 999-9999'); $('.mixed').mask('AAA 000-S0S'); });
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
- Validação de tipo de dado inputado.
- Mascaras flexíveis.
- Live Events para aplicações Ajax.
- Maxlength automático.
Mais sobre o jQuery Mask Plugin
- jQuery Mask Plugin no Github
- Página de demonstração
- Versão Beta do jQuery Mask Plugin
- Todas as versões do jQuery Mask Plugin
Créditos: Igor Escobar
0 comentários:
Postar um comentário