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 !

software engineer @hole19golf, #javascript #nodejs #ruby #java #php #scala #python

Twitter LinkedIn 

Be Sociable, Share!

Posts Relacionados:

119 thoughts on “Mascaras com jQuery Mask Plugin

  1. PS: Eu acabei conseguindo resolver o meu problema usando a variavel custom_options do jeito que eu precisava. Neste caso: valeu pelo plugin. 🙂

  2. Olá, Igor. Muito bom seu trabalho.
    Queria saber como faço para informar um valor negativo? Ou seja para ele aceitar o -?

  3. Hola Igor, una duda:
    si necesito un campo de texto con solo letras de largo 35 como hago eso sin usar “zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz”.
    Gracias

  4. Hi,
    I am using igorescobar jquey mask plugin version 1.9.0 (I am not sure, it might be old one). I need a small functionality in it. It is there in latest version of your file.

    When we long pressed a key on text box, i should get the masked one. With the current file i am not getting the masked number. (Eg:2222222222) . I am expecting to get “(222)222-222” when user long pressed 2 on the text box.

    Please share me the code changes required for this functionality. I have tried, but i couldn’t.

    Your help is greatly appreciated.

  5. Olá Igor,
    O link pra download está quebrado… Direciona pra uma pagina inexistente.

  6. Igor bom dia, consigo usar o script, porém em meu caso quando o input ja possui um valor, ao inves de formatar este valor ele limpa o value do input. Valor este no caso que foi enviado e formatado pelo scirpt ja. Por exemplo, digitei no input o telefone, ele formata o telefone, e envio esse form, depois o mesmo input deixo o value com $_POST[‘telefone’], e ele não reconhece este valor, ele apaga e limpa o input quando carrega o script. Tens alguma ideia para me ajudar? Obrigado.

  7. Opa Igor, muito bom, uso sempre, mas me surgiu uma dúvida… Como faço pra adicionar o clearIfNotMatch no exemplo do telefone de SP?

  8. Olá Igor,

    Estou usando o plugin em um formulário que estou desenvolvendo e ajudou muito!! 🙂 estou querendo usar na máscara do telefone celular a quantidade de caracteres mínima, quando digito um número ele aceita. Já tentei maxlength, min, max, mas não funcionou, se possível me dar alguma dica 🙂 agradeço.

  9. boa tarde, muito bom o plugin
    uma duvida… consigo usar ele com variavel?

    exemplo:

    var valor = 299;
    valor.mask(‘000.000.000.000.000,00’, { reverse: true });

  10. Boa Tarde Igor,
    Pode me ajudar:
    “jquery-3.1.1.js:3855 Uncaught TypeError: $(…).mask is not a function”, isso ocorre na utilização conforme exibida acima, estou usando angularjs.

  11. Olá. Gostaria de saber se á algum modo de não limpar o input clicar em voltar no browser, já que os campos que não tem máscara permanecem preenchidos.

  12. Olá, Igor.
    Primeiramente, parabéns pela iniciativa. Trabalho fantástico!
    Gostaria de saber se consigo aplicar as máscaras do jQuery Mask Plugin aos campos de um formulário criado com o plugin Contact Form 7.
    Abraço,
    Tiuzao.

  13. Ola,

    Estou tentando utilizar a mascara Money para minha aplicação, mas está ocorrendo o seguinte erro:
    “Erro em tempo de execução do JavaScript: O objeto não oferece suporte à propriedade ou método ‘off'”, tanto no IE como no Chrome
    Sabe me dizer como resolvo esse problema?

    Obrigado,

  14. Hi, well, i was running some test on your demo page, and your plugin, pretty sweet by the way, doesnt work on IE7, and on IE8 there is a issue on the key press, the cursor on the input does not stand on the last character and starts jumping across the value

  15. Olá Igor poderia me ajudar estou com dificuldade…na data:

    *Uso Rails 5 e Bootstrap*

    Meu javascript/people(pessoa).js
    # Place all the behaviors and hooks related to the matching controller here.
    # All this logic will automatically be available in application.js.
    # You can use CoffeeScript in this file: http://coffeescript.org/

    $(document).ready(function(){
    $(‘.datepicker’).datepicker({
    format: “dd/mm/yyyy”,
    startDate: “01/01/1930”
    });

    Meu form.html.erb
    ‘form-control datepicker’ %>

    Meu application.js
    //= require jquery
    //= require jquery_ujs
    //= require bootstrap-sprockets
    //= require twitter/bootstrap
    //= require bootstrap-datepicker
    //= require_tree .

    Minha Gemfile
    gem “twitter-bootstrap-rails”
    gem ‘bootstrap-datepicker-rails’
    gem ‘bootstrap-sass’
    gem ‘rails-i18n’

    Meu pt-BR.yml
    date:
    formats:
    default: “%d/%m/%Y”

    Mas mesmo com tudo isso o meu formulario, show e o index não fica adequado, na verdade não acontece nada

  16. Pingback: 2 plugins úteis para usar com jquery – Vamos Produzir…

Leave a Reply

Your email address will not be published. Required fields are marked *