Neste mês ocorreu o lançamento oficial da versão 0.4.3 do meu plugin jQuery Mask Plugin. Como nunca escrevi um artigo a respeito, hoje vou ensinar a vocês como utilizá-lo e vou falar de algumas features interessantes 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 tags 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 máscara 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” terão a máscara aplicada. No jQuery Mask Plugin você não tem máscaras pré-estabelecidas e pode escolher como você quiser. No site do projeto é possível 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 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 três caracteres alpha números, seguido de espaço, seguido de três 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. Interessante, não?

Vocês podem definir a máscara como quiserem e também podem definir o tipo de dado que pode ser inputado em cada dígito da máscara.

Features

• Validação de tipo de dado inputado;
• Máscaras flexíveis;
• Live Events para aplicações Ajax;
• Maxlength automático.

Mais sobre o jQuery Mask Plugin

1. jQuery Mask Plugin no Github
2. Página de demonstração
3. Versão Beta do jQuery Mask Plugin
4. Todas as versões do jQuery Mask Plugin

Qualquer problema, por favor, me avisem.