Mascaras com jQuery Mask Plugin

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/dist/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 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

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

Qualquer problema, por favor, me avisem.

AJUDOU? AJUDE NO DESENVOLVIMENTO DO JQUERY MASK PLUGIN

Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !

Posts Relacionados:

jGallery – A jQuery Plugin for Image Gallery’s

Olá Pessoal!

Mais um projeto pessoal. Com a oportunidade de um novo trabalho surgiu o jGallery. Um cliente me pediu um plugin parecido com o Lightbox, porém, ele queria que as fotos aparecessem logo abaixo, como uma galeria de fotos onde o usuário pudesse navegar entre as fotos sem sair da famosa “lightbox”. A partir desta necessidade surgiu o jGallery. Um plugin feito em jQuery para exibir de forma elegante uma galeria de fotos.

Características

  • Atalhos de teclado.
  • Se a imagem estourar a área útil do navegador a mesma é redimencionada de forma proporcional.
  • A galeria sempre se ajusta a sua resolução, inclusive a imagem (caso estoure a área útil).
  • Efeitos de transição.
  • Pre-loading de imagem.
  • Interface intuitiva e fácil de utilizar.
  • Compatibilidade com Internet Explorer, Chrome, Safari, Firefox e Opera (foi os que eu testei).

Código-Fonte

http://github.com/igorescobar/jGallery

Demo

http://igorescobar.com/projects/jGallery/

Sugestões

blog [at] igorescobar [dot] com

Posts Relacionados: