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.jsA ú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.
(\___/)
( ͡ ͡° ͜ ʖ ͡ ͡°)
\╭☞ \╭☞ Follow me on Twitter!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[javascript] $(document).ready(function(){ $('.date').mask('00/00/0000'); }); [/javascript]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:
[javascript] $(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}); }); [/javascript]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:
[javascript]$('.mixed').mask('AAA 000-S0S');[/javascript]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
- jQuery Mask Plugin no Github
- Página de demonstração
- Source-Code do jQuery Mask Plugin
- Todas as versões do jQuery Mask Plugin
Qualquer problema, por favor, me avisem.
Igor Escobar 
Estou com dificuldades em aplicar a máscara em inputs dinâmicos. poderia me ajudar com alguma dica?
LikeLike
Igor, obrigado, já resolveu com a nova versão. Um abraço.
LikeLike
Estou com um problema ao tentar setar dados via POST em campos com máscara. Todos os campos são preenchidos, com exceção daqueles com máscara ou que a máscara alguma vez já tenha sido carregada no input. Já verifiquei o formato dos dados e todos estão no mesmo formato da máscara. Por exemplo: um field date com máscara 00/00/0000 não é preenchido, apesar de o value do componente html estar com o valor correto. O problema é apenas em questão de visualização. No mais, parabéns pelo plugin, quebrou um galho grande! xD
LikeLike
A nova versão do plugin resolveu o problema (:
LikeLike
Olá, bom dia!
Excelente plugin! Estou conseguindo utilizar ele para diversas coisas!
Apenas uma dúvida.
Estou criando um campo de cadastro com código de cliente e para cada código eu utilizo o padrão C-000000. Porém se eu preencher apenas o códio 32, por exemplo, ele ficaria C-32 sendo que eu gostaria que ficasse C-000032. É possível fazer isso com o seu plugin?
Obrigado!
LikeLike
Olá Igor,
Gostaria de saber se é possível fazer com que a máscara deixe o campo vazio caso a mesma não esteja completa.
Dei uma olhada nos exemplos e nas documentações na parte de callbacks, usando o onInvalid, mas não consegui.
Muito obrigado.
LikeLike
Muito obrigado por desenvolver este ótimo plugin.
LikeLike
Igor! Eu consigo mascarar campos para valores negativos? Não consegui! Obrigado!
LikeLike
Bom dia Igor,
Estou usando seu plugin no meu projeto, funciona muito bem!
Porém estou com um pequeno problema no mobile, por exemplo no campo de CPF ou telefone.
Ao digitar cada caractere, ele embaralha e se perde nas posições.
Pelo callback, tentei disparar um evento logo após o keyUp, mas sem sucesso.
Pode me orientar uma possível solução?
LikeLike
Igor, boa noite. Estou olhando seu plugin e estou precisando do seguinte: tenho uma tabela onde é atribuido linhas dinamicamente, dentre as linhas que são atribuidas esxiste um input que é uma data, como em minha tabela tenho várias linhas queria saber de você se é possível colocar a mascara de data nesse campo que eu defino como array. Caso positivo onde consigo um exemplo? Tentei usar o $(document).ready(function(){
$(‘.date’).mask(’00/00/0000′);
)};
mas não tive sucesso.
LikeLike
Buenas vivente,
bom trabalho, 🙂
tenho uma dúvida, como faço pra aplicar data-mask=”” em campos que são carregados por ajax?
LikeLike
Buenas vivente,
pra funcionar com ajax utilizei o seguinte:
$.ajaxSetup({ complete : function () { $.applyDataMask(); } });LikeLike
Olá Igor,
Estou usando o plugin em conjunto com o validadete, mas quando utiliza seu plugin o formulário é enviado, mesmo quando os campos requiridos estão vazios. Quando desabilito seu plugin o validate funciona normalmente.
Sabe o que pode ser?
LikeLike
+1 para a gem
LikeLike
Oi, eu estou usando seu plugin mas estou com uma duvida quando tento colocar R$ em dinheiro:
Se eu digo mask(“R$ 000.000,00) e reverse: false, o usuário é obrigado a digitar preços com essa quantidade exata de zeros. Se eu coloco reverse: true, pra ele poder digitar quantos zeros quiser, o R$ só aparece quando ele digita o valor com essa quantidade específica de zeros..
Não sei se eu que não estou usando o plugin direito ou se ele não faz exatameeeente o que eu estou querendo..
Desculpa se vc ja responde isso em algum lugar mas procurei bastante e não achei.
LikeLike
PS: Eu acabei conseguindo resolver o meu problema usando a variavel custom_options do jeito que eu precisava. Neste caso: valeu pelo plugin. 🙂
LikeLike
Muito válido!!!
LikeLike
Olá, Igor. Muito bom seu trabalho.
Queria saber como faço para informar um valor negativo? Ou seja para ele aceitar o -?
LikeLike
Hola Igor, una duda:
si necesito un campo de texto con solo letras de largo 35 como hago eso sin usar “zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz”.
Gracias
LikeLike
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.
LikeLike
Olá Igor,
O link pra download está quebrado… Direciona pra uma pagina inexistente.
LikeLike
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.
LikeLike
Tem valores negativos ?
LikeLike
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?
LikeLike
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.
LikeLike
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 });
LikeLike
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.
LikeLike
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.
LikeLike
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.
LikeLike
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,
LikeLike
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
LikeLike
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
LikeLike
Parabéns pelo excelente trabalho, Igor! Não poderia ser mais fácil de utilizar.
LikeLike
muito obrigado…funfo prefeitamente
LikeLike
Melhor plugin! Parabéns 🙂
LikeLike
Parabéns mesmo! Eu procurei em inglês e quando vi aquele São Paulo phone percebi que era um dos nossos kkk. Muito bom o plugin, tentei outros, mas esse foi o único que funcionou direito no meu site
LikeLike
Bom trabalho, me ajudou muito!
LikeLike
Ótimo, ajudou muito!
LikeLike
Parabéns, Igor.
Teu plugin é muito útil e deve estar ajudando muitos devs por aí.
Para mim, certamente resolverá todos meus casos, mas tive um pequeno problema nos testes quanto à máscara money.
Quando digitamos apenas dois números, por exemplo, 14, o plugin não obriga o usuário a digitar os zeros dos centavos e aceita os 14 como sendo inteiro. Tudo certo, só que se o usuário precisa informar um número inteiro com mais de dois dígitos, a máscara começa a adicionar os centavos. Então, quem está acostumado a digitar 14. quando vai digitar 140 (inteiro), acaba digitando 1,40. Eu sempre critico as pessoas que não prestam atenção no que estão fazendo, mas nesse caso, não tem jeito… depois de um tempo, o que era 140 virou 1,40 e a culpa passa a ser nossa.
Aí eu pergunto… fica muito difícil fazer com que a digitação inicie do 0,00? Assim, o usuário se obriga a digitar 1400 para preencher os 14,00, senão terá 0,14. O problema de atenção provavelmente continuaria, mas pelo menos, a regra passa a ser uma só: tem que digitar os centavos.
O que acha? Vale a pena pensar e mudar isso?
LikeLike
Hei, Igor.
Estou com um problema em mobile, num aparelho específico (Samsung Galaxy S6 Edge com Android 7.0, Chrome 72.0.3626.96), ao digitar valores financeiros, quando aplica a máscara (depois de vírgula ou ponto) ele se perde e insere vários números. Você já viu esse problema? Tem algum tratamento?
Obrigada!
LikeLike
Uma dica para quem quiser usar o plugin para placas de automóveis no padrão normal e Mercosul:
$(‘#placa’).mask(‘SSS-00A0’);
LikeLike
Olá Igor, em primeiro lugar parabéns pelo plugin é muito fácil de usar
Estou com uma dúvida tenho um input que estou formatando assim
$(‘.money’).mask(“#.##0,00”, { reverse: true });
Funciona perfeitamente, porém se o usuário digitar apenas o valor 5 quando sai o foco do input mantem o 5. Gostaria que ele aplicasse a mascaras 5,00.
Como posso fazer isso?
Desde de já muito obrigado.
LikeLike
Olá tudo bem? Gostaria de saber se esse plugin faz validação no form ou se é possível fazer a validação passando uma função para o mask. Me refiro à impedir de que o form seja enviado caso algum input não esteja correto.
LikeLike
ola como faço para chamar o metodo para ao input text????
LikeLike