Masks With jQuery Mask Plugin

Today is the oficial release of the version 0.4.3 of my jQuery Mask Plugin. Since I have never written about it before on this blog, I’ll teach you guys how to use it and some other cool features about it.

Downloading the code

 wget https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/jquery.mask.min.js 

The only thing that you guys need to do is include the javascript file of the plugin between the head tag in your HTML document and it’s all set to use.

The syntax

The jQuery Mask Plugin syntax is pretty simple. First, you input your  selector, followed by the .mask and then as a parameters you have to put the mask that you want the plugin to apply on the form field.
Example

$(document).ready(function(){
  $('.date').mask('00/00/0000');
});

In this example the mask 00/00/0000 will be applied in all the input fields that have the “.date” class. At jQuery Mask Plugin you don’t have pre-established masks, you choose the mask as you wish. On the website project you can see the jQuery Mask Plugin running with some others examples like this:

$(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});
});

[amazon_link asins=’1521359288,B004GTLFDM,B004XQX4K0,0596517742,1593275846,1491924462,1593274084′ template=’ProductCarousel’ store=’igorescobar-20′ marketplace=’US’ link_id=’c8d5e5f1-631a-11e7-b915-25378f8362c6′]

As you can see, it’s possible to define other data type on each digit of the mask. This mask for example:

$('.mixed').mask('AAA 000-S0S');

The user can type a sequence of three alpha numeric characters, followed by space, three numeric characters, a slash, one string character, other number character and finally one string character, cool isn’t it?

Again, you can define the mask as you wish and the data type of each digit of the mask as well.

Features

  • Lightweight (~2kb minified, ~1kb gziped).
  • Masks on any HTML element!
  • data-mask attribute support.
  • String/Numeric/Alpha/Mixed masks.
  • Reverse mask support for masks on numeric fields.
  • Sanitization.
  • Optional digits.
  • Digits by range.
  • Automatic maxlength.
  • Advanced mask initialization.
  • Callbacks.
  • On-the-fly mask change.
  • Mask removal.
  • Customization.
  • Compatibility with Zepto.js

More about jQuery Mask Plugin

  1. jQuery Mask Plugin on Github
  2. Demonstration
  3. jQuery Mask Plugin
  4. All versions of jQuery Mask Plugin

Any problems, please, let me know.

Help us!

http://igorescobar.github.io/jQuery-Mask-Plugin/

Posts Relacionados:

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

http://igorescobar.github.io/jQuery-Mask-Plugin/

Posts Relacionados: