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 
Excelente funcionalidade, muito bom e simples. Obrigado Jquery por existir.
LikeLike
Muito bom o plugin. Mas queria saber como desativar a máscara. Eu quero tirar as máscaras de um campo depois de ela já ter sido ativada. Eu criei uma página onde dependendo do que o usuário selecionar no dropdown, o campo vai servir para coisas diferentes.
LikeLike
Marcelo,
Hoje não existe um método nativo para fazer isso, mas me comprometo a fazer isso e comitar o quanto antes.
O que você pode fazer para resolver o seu problema agora é isso:
$(“SELETOR_DOS_ELEMENTOS_QUE_VOCE_QUER_REMOVER_A_MASCARA”).die(‘keyup.jquerymask’);
LikeLike
@Marcelo
Com a versão nova tem um metodo remover a mascara!
ex: $(‘.phone’).data(‘mask’).remove();
LikeLike
Olá Igor.
Tens alguma solução já pronta para a questão do 9º digito de celular no estado de são paulo? A mascara ficaria dinâmica dependendo do DDD ou algo assim…
LikeLike
@Wellington
É só utilizar os callbacks do plugin e alterar a mascara quando o DDD do telefone for 11. Na página do projeto tem um exemplo em que se utiliza callbacks e a mascara é alterada on-the-fly.
Qualquer problema me avise.
– Igor.
LikeLike
Olá Igor,
Referente à questão do 9º dígito para o DDD 11, no qual a máscara deverá ser (99)99999-9999, concorda que, futuramente, pode ocorrer de termos que voltar no código e validar para mais opções de DDD? Acredito que seja um tanto quanto inviável dessa forma.
Estou procurando uma solução para que a máscara aceite, no mesmo campo, tanto (99)9999-9999 quanto (99)99999-9999, ou seja, que o 5º dígito no prefixo não seja de preenchimento obrigatório.
Pode me ajudar?
Obrigada.
LikeLike
Vou postar como ficaria a solução da forma que é possível HOJE. Mas o que você procura, dígitos opicionais, ainda não foi implementado
LikeLike
Não consegui fazer funcionar… tem como disponibilizar um .zip com uma pagina de exemplo ?? ou o código da pagina de ex. ..
LikeLike
No próprio post tem vários links úteis para começar, Alessandro 🙂
Mas aqui vai: http://igorescobar.github.com/jQuery-Mask-Plugin/
LikeLike
eu segui esses exemplos Igor, mas não funcionou… consegui fazer funcionar uma outra versão do jQueryMask… mas essa não consegui… curti muito o lance do “reverse” … não tem como enviar uma pagina exemplo ??? pois com certeza estou fazendo algo de errado.. sou leigo nessa parte de programação.. mas estou aprendendo, minha praia é mais Designer…
Se puder me ajudar..
Valew
LikeLike
@Alessandro
Cria um jsfiddle com o código que eu tento te ajudar 😉
LikeLike
Igor primeiramente parabéns pelo plugin esta ficando cara vez melhor, queria ver com você, se voê sabe o porque que no android (testei na versão 2.2 e 2.3 no navegador padrão) quando temos a mascara de telefone “(99) 9999-9999” ele pula de posições, não insere em ordem igual nos navegadores. Estou desenvolvendo um site para celular e estou tendo esse problema.
Obrigado!
LikeLike
Alan!
Estou trabalhando para tornar o jquery mask plugin cada vez mais compativel com os navegadores, porém, eu ainda não consegui descobrir o motivo de acontecer isso nos browsers mobile. Assim que eu tiver alguma novidade vou estar liberando isso para vocês. Se você descobrir por algum motivo, nos avisa aqui que eu corrijo RIGHT NOW!
LikeLike
@Alan
Fiz uns testes aqui e o plugin funciona normalmente no Chrome Mobile e no Opera Mobile no Android. No navegador padrão realmente está apresentando problemas. Vou começar a investigar e ver se consigo resolver.
LikeLike
Depois de pesquisar MUITO! no final das contas, é um bug do browser.
http://code.google.com/p/android/issues/detail?id=15245
Em todos os outros navegadores mobile que testei funcionou, menos no nativo do Android.
LikeLike
Vish cara, que pepino!!!
Beleza Igor, muito obrigado pela atenção e sucesso!!!
LikeLike
Olá, Igor. Parabéns pelo plugin.
Existe a possibilidade de configurar uma determinada máscara para aceitar valores negativos?
Obrigado.
LikeLike
Olá Tiago!
Sinceramente, se você quiser usar campos de moeda etc, existem plugins especificos para resolver este tipo de problema. Não fui muito afundo nestes tipos de problemas por que se eu fosse tentar resolver o problema de mascara e toda a lógica e recursos necessários para resolver os problemas dos campos de moeda o plugin ficaria muito pesado.
LikeLike
Igor, você está de parabéns! Muito obrigado pelo código, me ajudou bastante! O único probleminha que estou tendo, é que agora eu coloquei um novo incremento no meu código (jQuery Box Collapser) e ela usa a seguinte linha para funcionar:
E com isso, o acredito que brigue com o core do seu exemplo, pois ele para de funcionar. Existe alguma solução que posso utilizar para o Box Collapser, sem que dê esse problema com o seu código?
LikeLike
@Mario
É mais fácil você criar um jsfiddle exemplificando o conflito, fica até mais fácil para eu debugar.
LikeLike
Obrigado pelo ótimo componente!
LikeLike
Bom Dia Igor Escobar,
Necessito referenciar algo no formulário para que ele pegue as mascaras?
Obrigado
LikeLike
@Gilson Pode elaborar um pouco mais a sua pergunta?
LikeLike
Igor, tenho estou adicionando campos dinamicamente usando o append() do próprio jQuery, porém as máscaras dos campos não funcionam. Você já teve algum problema parecido?
[]’s
LikeLike
@Fernando Macedo
Já tentou usar o live para aplicar a mascara?
LikeLike
Ex: $(document).on(“click”, “.form-field”, function(){ $(‘.form-field’).mask(’00/00/0000′); });
LikeLike
Cara, tentei fazer algo parecido aqui no aspx.(estou desenvolvendo em asp.net)
e fiz a seguinte função;
$(document).ready(function ($) {
$(“#MainContent_txtId_Cliente”).mask(“0000”);
});
E o código do text box que recebe a validação é o seguinte
A máscara aparece no textbox, mas quando eu clico nela o cursos vai todo para a direita e eu não conigo digitar nada(mesmo mundando a posição do cursor)
LikeLike
Parabéns pelo componente, me ajudou muito. obrigado
LikeLike
Olá!
Parabéns pelo “Mask Plugin”.
Gostaria de sugerir, ou ver se tem como, limitar o número a ser digitado em uma data, por exemplo no ano:
$(‘#data’).mask(‘D0/M0/ANO’, {‘translation’: {D: ‘[0-3*]’, M: ‘[0-1]’, ANO: ‘[1900-2014]’}});
Testei assim e não consegui…
Abraços
LikeLike
@Nissius Não, é possível fazer o que você procura da forma que está tentando fazer, mas é possível você utilizar os callbacks e fazer as validações que você procura dentro do callback.
LikeLike
Olá Igor,
Acabei de ver seu plugin, e já de cara gostaria de perguntar, tem alguma previsão para o uso de um place holder?
Muito Obrigado
Att.
Leonardo Lima
LikeLike
@Leonardo Até o momento, sem previsão. Placeholder é algo que você pode contornar no front-end. E na minha visão, quanto menos “lixo” estiver dentro do campo de formulário menos filtros você precisa fazer do lado do servidor para armazenar a informação, por isso eu não estou dando tanta prioridade assim para esta questão.
LikeLike
Bom dia, Igor,
Primeiramente, parabéns pelo ótimo trabalho!
– Percebi que o onComplete só é invocado se a máscara for aplicada por completo. Ex.: No caso de máscaras com dígitos opcionais, como IP (‘0{1,3}.0{1,3}.0{1,3}.0{1,3}’), caso estes não sejam digitados (‘10.1.1.1’), o onComplete não é chamado.
Meu problema, na verdade, é o seguinte:
Preciso que, ao digitar um valor que não “case” com a máscara, ele suma automaticamente. Ia fazer isso usando callback, no onComplete, mas caí no problema que citei acima.
Alguma sugestão de como possa resolver este problema?
– Estou usando a versão 0.10.1 do seu plug-in.
LikeLike
@Élcio
Realmente é um bug. Estou trabalhando nisso, hoje, sinceramente não há nada que você possa fazer 😦
LikeLike
@Élcio
Faça uma verificação no onBlur do elemento usando uma expressão regular:
$(‘element’).blur(function(){
if($(this).val().match(/^0{1,3}.0{1,3}.0{1,3}.0{1,3}$/)==null)
$(this).val(”);
});
LikeLike
Opa Igor Beleza,
Cara, estou com a seguinte situação, tenho uma mascara aqui, somente números,
alinhada em modo RTL(dir=”rtl”), porém quando aplico o css(via jquery, via css), a mascara inverte tbm, ela só volta ao normal quando eu completo a quantidade de caracteres. o problema que essa quantidade não é obrigatoria.
Exemplo:
Posso digitar 9 digitos:
1234567/89
Ou digitar 7 digitos:
12345/67
A obrigatoriedade é somente os após dois digitos ele tem que colocar barra.
Seria algo como o money, mas colocando a barra.
Segue o fiddle:
http://jsfiddle.net/thwyster/ma4EQ/
Saberia me dizer como posso resolver ?
Agradeço desde já,
Obrigado!
LikeLike
Olá Igor,
Estou desenvolvendo uma app com o jquerymobile, porém percebo que não está funcionando a mask quando carrego uma nova página utilizando data-ajax=true. Entende?
Não compreendo o porquê 😦
Pode me dar uma ajuda, por favor?
LikeLike
Trabalho sensacional Igor. Parabéns.
Bem simples de usar.
LikeLike
Bom dia Igor. Parabens pelo componente!!! Cara, como eu poderia criar uma mascara de email e uma máscara que identifique se é CPF ou CNPJ?
LikeLike
@Matheus,
Da uma lida nos comentários, o @Alexandre teve a mesma dúvida.
LikeLike
Igor, eu já tinha lido os comentários e mesmo assim, não encontrei nada. O Alexandre que você me disse eu também não consegui encontrar. Eu tentei utilizando esta função:
$(document).ready(function () {
$(‘.formTextbox’).mask(‘E’, {
translation: {
‘E’: { pattern: ‘/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/’ }
}
});
});
Mas isto também não funcionou, pois toda vez que digito alguma coisa a máscara apaga!!! Você tem alguma outra sugestão?Att, Matheus.
LikeLike
@Matheus Mascara de e-mail, até da para fazer, mas não vale a pena. Até por que não existe “mascara” para e-mail. Cada um digita o e-mail da forma que entende, não existe um padrão “fixo” que deve serseguido como data, CPF etc. O que você está querendo fazer é se livrar de ter que “sanitizar” no input, não faça isso. Valide o e-mail. O tópico que mencionei o @Alexandre responde a sua questão sobre o CPF e CNPJ. O código que você postou também está errado. Não é assim que o plugin funciona. Cada caractere da mascara é analizado de forma separada. Você não pode criar um único “atomo” E e usar ele para validar todo o resto dos caracteres digitados, este não é um plugin de validação, é de mascara. E o que a gente entende por mascara são que devem ser preenchido seguindo um “pattern” pré definido. Espero que tenha clareado para você.
LikeLike
Desculpe, o @Alexandre postou em outro post “http://www.igorescobar.com/blog/2012/07/29/mascara-javascript-para-os-novos-telefones-de-sao-paulo/” acabei misturando os posts.
LikeLike
Ahhh….muito obrigado Igor. Ficou muito mais claro agora!!! Imaginei que o plugin pudesse entender o regex como um todo e não somente no caractere. Enfim, mais uma vez, parabéns pelo componente de máscaras.
LikeLike
Olá amigo, parabéns pelo trabalho. Estou utilizando seu plugin em todos os projetos da empresa.
Preciso de uma ajuda: no seu exemplo da mascara monetária, como eu faço para o campo aceitar valores negativos?
Abraço
LikeLike
Olá, estou utilizando seu plugin, achei melhor que o outro que usava, gostei muito. Mas ainda sou noob, espero que possa me ajudar. No formulário, utilizo um plugin que clona os campos (http://www.mdelrosso.com/sheepit/index.php?lng=en_GB&). Seu plugin funciona perfeitamente nos campos que já existem, mas não nos que foram clonados. Como resolvo esta questão? Muitíssimo obrigada! :*
LikeLike
@Stephanne infelizmente, atualmente não existe uma forma muito sofisticada para resolver o problema. O que eu faço é extrair para um método toda a implementação de mascaras. Fiz um exemplo de como você pode resolver este problema: http://jsfiddle.net/56pud/
LikeLike
Obrigada por me ajudar!
Depois de verificar a sua solução, dei uma olhada na documentação do outro plugin, e acabei descobrindo como fazer os dois plugins funcionarem. Usei um callback (afterAdd) do outro plugin, e dentro dele, chamei o de máscaras. Não sei se está certo, mas funciona. 😀
Parabéns pelo plugin, ele é ótimo. ^^
LikeLike
Olá @IgorEscobar , tenho um pequeno problema. Em um formulário quando é enviado o POST e o arquivo PHP retorna erro por exemplo, se o usuário “Voltar” a página utilizando as setas do navegador “Voltar” e “Avançar”. os campos que foram mascarados não voltam preenchidos! os que não foram mascarados voltam preenchidos normalmente. Tem algo que eu possa fazer, ou é limitação do navegador mesmo?
LikeLike
@Ewerton os dados tem que estar no formato da mascara quando virem do POST. o plugin retira os caracteres invalidos para cada posição. Você tem que ver como a informação está vindo formatada depois do POST e verificar se está em um formato adequado.
LikeLike
Bom dia Igor.
Estou utilizando a máscara para telefone com 5 dígitos no prefixo, porém não está funcionando, nem no seu exemplo está.
poderia dar uma ajuda???
Outra coisa, no meu caso não tem o ddd, somente o número, como eu mudo o regex???
Fico no aguardo, obrigado.
LikeLike
Se você compartilhar o seu código, fica mais fácil descobrir o problema. Cria um jsfiddle funcional com seu codigo e posso tentar te ajudar.
LikeLike
Olá Igor, teria como fazer uma mask única para ambos?
(11) 99999-9999
(11) 9999-9999
Lucas
LikeLike
@Lucas da uma olhada no post: http://www.igorescobar.com/blog/2012/07/29/mascara-javascript-para-os-novos-telefones-de-sao-paulo/
LikeLike
Olá Igor parabéns pelo script estou começando a fazer uso dele aqui e achei fantástico. Tenho uma dúvida preciso usar através do data-mask mas como coloco reverse no data-mask?
LikeLike
@Alexandre é só adicionar um atributo ao seu campo data-mask-reverse=”true”. Obrigado pelo elogio 😉
LikeLike
Esse plugin para o jQuery funciona bem nos browsers desktop, mas não funciona no browser nativo do Android anterior a versão 4.4.2 (KitKat).
Estou desenvolvendo um aplicativo mobile e não funciona no Android 4.1.2, nem no 4.2.1 e nem no 4.0.3. Só funciona mesmo no 4.4.2
LikeLike
@Wagner, se puder me ajudar a resolver o problema eu agradeço. Eu não tenho Android, fica difícil resolver.
LikeLike
Igor, tudo bom?
Parabéns pelo trabalho.
na hora de apresentar a formatacao no formulario no caso telefone, se for 8 digitos funciona normalmente, agora 9 digitos, fica da seguinte forma: (33) 3333-3333?3 com esse ponto de interrogacao, sabe porque?
LikeLike
Usa a versão v1.6.0, se o problema persistir, abre uma issue no github do projeto 😉
LikeLike
Olá, Igor.. parabéns pelo plugin!
Estou com o mesmo problema que algumas pessoas relataram: incompatibilidade com os browser mobile. No meu caso é somente com o Firefox. Testei no Android 4.4.2 e não consegui. Ele simplesmente embaralha os números quando eu apago e digito novamente. No chrome funcionou.
Tem alguma ideia de como resolver?
Abraço!
LikeLike
@Adolfo estou na correria para tentar resolver isso para vocês. A v1.6.0 deu uma melhorada, mas não sei se corrigiu a versão 4.4.2. O tempo é curto!
LikeLike
Igor, muito interessante seu plugin, porém, senti falta de uma validação quando o campo não é preenchido corretamente. Tem alguma propriedade para fazer essa validação?
LikeLike
@Alexandre este é um plugin de mascara. Sugiro utilizar um plugin especifico para validação se necessário. De qualquer forma, os callbacks podem ser sempre utilizados para fazer o que quiser 🙂
LikeLike
Igor o plugin costuma por foco no ultimo elemento “mascarado”. Isso é proposital ou é algum problema? Abraços e parabéns.
LikeLike
@Daniel Veja se a versão v1.6.0 corrige o problema.
LikeLike
Igor, boa tarde!
Gostaria de validar a mascara que o meu input está utilizando, como por exemplo, se a máscara que coloquei está realmente preenchida, caso não esteja, gostaria de limpa-la. Valeu
LikeLike
@Messias da uma olha na documentação, usa a opção clearIfNotMatch: true que foi desenvolvida na versão v1.6.0
LikeLike
Salve! Parabens pelo plugin!!! Estou passando por alguns problemas de conflito entre o Jaqueri UI date Picker e a mascara, testei algumas versoes de plugin, versoes do Jquery e versões do DataPicker, porem toda vez que a pagina e carregada com a mascara ( seja de forma encadeada, antes ou depois da chamada do datepicker, ou como atributo da TAG), o calendario aparece aberto com o FOCUS no campo. Esse Bug so para ao retirar a chamada da mascara do campo… VC Ja viu algo assim? ALguem ja passou por isso? Pesquisei no Google porem nao achei nada especifico sobre isso… O maximo foi sobre hierarquia de carregamento… Muito Obrigado! Abs Marcio Loureiro
LikeLike
@marcio a última versão do jquery mask deve resolver este problema.
LikeLike
Estou com o mesmo problema do: Ewerton on 27 de January de 2014 at 13:41 said:
Ao enviar um formulário no metódo post, quando eu volto nas setas do browser, tudo vem preenchido exceto o da máscara. Mas o plugin é muito bom. =)
LikeLike
Bom dia,
Fantástico o seu plugin, estou com uma dúvida: existe alguma forma de incluir prefixo nas máscaras de moeda? (tipo R$ 1,25)
Desde já agradeço
LikeLike
estou com um problema com essa mascara por exemplo se eu tenho um campo que utiliza ela mas esse campo não é obrigatário , eu não consigo apagar via javascpt , por exemplo eu tenho um botão cancelar que limpa todos os campo os que estão com a mascara só some o primeiro digito como que eu resolvo isto?
LikeLike
Olá Igor, gostei do seu plugin,
Alguma chance de fazer uma gem? Gostaria de usá-lo no rails.
LikeLike
Olá Igor. Parabéns pelo plugin. O problema com mobile continua. Estou desenvolvendo um app e no campo de telefone não posso deixar text se não o keyborad não muda pra numérico. E com type number o plugin não ta criando as máscaras.
LikeLike
@Gregory o campo do tipo NUMBER é controlado pelo browser e ele não deixa entrar NADA no campo que não seja numero por isso a mascara não funciona. O plugin só funciona para campos do tipo TEXT.
LikeLike
Como uso data-mask? no funciona…
LikeLike
Achei muito bom o trabalho. Mas deixo uma pergunta, e talvez uma possivel implemnetação, se assim vc desejar:
numeros pq nao receber da direita pra esquerda , e no parametro reverso faria o inverto?
e no caso de valores, pq nao receber sobre a virgula, podendo ir para as decimais qdo eu solicitar ?
LikeLike
Igor, boa tarde;
Seu plugin é ótimo, estou usando ele em um sistema que estou desenvolvendo. Este sistema é o meu primeiro, pois não sou muito experiente.
No meu sistema tenho alguns campos que estou adicionando dinamicamente, linha a linha com uma função jquery que usa a append em uma variável que contem a estrutura da linha que quero adcionar. A mascara funciona na primeira linha que está no meu form, mas quando solicito a adição de mais linhas ele já não funciona. tem algo que eu possa estar fazendo de errado? Pode me dar um help? Abraço. Reinaldo
LikeLike
Quem estiver com problemas, atualizem suas versões. Se persistir, abram uma issue no github.
LikeLike
Igor
Tive contato hoje com seu plugin por recomendação de um amigo, ele me parece perfeito e com certeza irei utilizá-lo para meus campo input, voce tem ou recomenda algo para campos output?
LikeLike
@Grenne, o jQuery Mask também aplica a mascara em elementos como span, divs, tds etc.
LikeLike