igorescobar / jquery-mask-plugin Goto Github PK

Estou usando o plugin para configurar uma máscara dinâmica (CPF/CNPJ) em um campo. Ao digitar um número (Ex.: 12345678900) a máscara formata corretamente, exibindo 123.456.789-00. No entanto, utilizando o mouse, ao posicionar o cursor no campo entre o número 2 e o número 3, por exemplo, e pressionar a tecla DELETE, em vez de apagar apenas o número 3, todo o texto após o 3 é apagado ficando apenas 12. Um teste pode ser feito na página demo "http://igorescobar.github.io/jQuery-Mask-Plugin/" em qualquer campo, por exemplo, no campo Crazy Zip-Code: Digite 1234567, depois posicione o cursor entre o 2 e o 3 e pressione a tecla Delete, nesse caso, apenas o dígito 1 permanecerá. Teste realizado no Ubuntu 13.04 com Firefox 22.0.

Using the demo, in the money field, you can see that the delimiters , is transformed into zero when you type an letter

Type : 1111
It will be masked into : 11,11
if you type a letter into the input
the content of the input will be transformed into : 11011

Visit the Demo Page mentioned in the project and try entering phone number in the US Phone number field and I noticed strange behavior.
It was working perfect in the remaining browsers. Also in Desktop Opera.
I was using Opera Mobile Emulator 12.1.4 for Android where I do most of my testing for Opera Mobile.
Thank you in advance.

Igor, talvez a pressa e cansaço do serviço não me deixaram ver as atualizações do plugin, caso tenha tido essa alteração.

Bom, uma de minhas Issues ( #47 ) era sobre problema com os quantificadores ("{ }") e só agora percebi em minha página um erro em cima da versão 1.1.3 (última que tinha baixado) mas também sobre a 1.3.0 (baixei hoje) que é o seguinte, defini a mascara:

$('input[type=password]').mask('A{4,20}');

Então digitei: "a1", e vi o campo ter mais caracteres, ao visualizar o conteúdo estava: "a{4,1". Ou seja, o plugin não tem mais funcionalidade pra quantificador?

O caso aqui é o mesmo da issue #47 ... (Ou quase) Quer dizer, voltou a dar problema o que estava resolvido... Tenho que usar outra forma pra isso?

It would be nice if money would reformat when backspace is pressed. This is using the reverse:true option.

Great plugin, Thanks!

Se eu posicionar o cursor no final da caixa de texto e quiser efectuar o Shift + Home para selecionar todo o texto, na última versão isso deixou de ser possivel. Não consigo seleccionar todo o conteudo da caixa de texto. Na versão 1.1.0 funciona correctamente, logo foi algo que não ficou bem. Testado no chrome

I have a field for a South African postal code (4 digits), and my mask looks like
this $('.postal-code').mask('0000');

If the type of the input is text, it works as expected, if the type is "number" then any text entered removes all the text in the textbox (including the valid parts) i.e 333 and then 'f' will clear the textbox out.

I want to use type = "number" because I am making a mobile web app, and want the on screen keyboard to display numbers.

If I have a date mask '99-99-9999'
and when I write 111 the plugin will apply the mask 11-1 every time the mask is applied the plugin fires a change event. If I have a .net validator associated with that textbox the .net validator will catch the change event and will try do a validation. Since the validation is an invalid date the validator will fire, and an error is displayed to the user.

My question is why do you need to fire the change event? Why don't you just fire the change event if the used changes any test on blur event?

I noticed in the code you weren't binding to the input event. The input event fires synchronously when an input or textarea changes its value, and allows you to manipulate its value before it's set. This would remove the flicker effect you see when the value changes.

Hi Igor, i am currently using your jQuery-Mask-plugin for developing my website. i would like to ask if there is already a feature that accepts masking for email address? or do you have simple example wherein i can incorporate Regex codes for email to the modules? thanks and have a nice day

How do I make it work for right click -> paste?

Configurei um input text para mudar a máscara dinamicamente ao digitar um número de CPF ou CNPJ. O campo é configurado por padrão com a máscara do CPF, aí, dependendo da quantidade de números digitados, a máscara muda dinamicamente. Ao colar um número CPF (11111111122) utilizando o BOTÃO DIREITO DO MOUSE a máscara formata corretamente, no entanto, se inicialmente colarmos um número de CNPJ (11111111000122), como a máscara inicial é a do CPF, o plugin formata o número CNPJ colado com a máscara do CPF, truncando o restante (mostrando assim: 111.111.110-00). Se colarmos o mesmo número CNPJ utilizando agora o CTRL+V a máscara muda, mas, por algum motivo também trunca o número, ficando assim: 11.111.111/0001.

There are 3 places on the code where the variable "mask" is used as Array (lines 110, 152, 153), this causes a mask misreading on IE7. To solve this I've used mask.charAt() instead of mask[]. It seems to solve the problem.

My final code:

--------------------------- Line 152

    if (plugin.settings.translation[mask.charAt(i)])
      regex += plugin.settings.translation[mask.charAt(i)];

--------------------------- Line 110

        arguments[i] = mask.charAt(i-1);

Is it possible to show _ and ) for example a phone number could be seen as (__) - initially and when it is typed in
This is more of a feature request.

Boa tarde Igor,

Estou usando sua mascara e percebi que a mascara de telefone (que serve para telefones de SP ou não) não está funcionando no IE7 e IE8.

Valeu!

Olá Igor, estava acompanhando as novas versões do plugin e baixei a mais recente v1.1.2...

O que aconteceu foi o seguinte... Tive dois problemas, um com o jQuery novo... e um com o próprio plugin. Meus elementos são dinâmicos e aparecem depois de uma chamada por ajax, assim sendo usava este código para adicionar a mascara nos elementos:

$(document).one('focus.mask', '.inpNota', function(args){
  var el = (args.currentTarget) ? args.currentTarget : args.srcElement;
  $(el).mask(maskNota, opt);
});

Até aí beleza funcionava perfeitamente com jQuery 1.7 e o plugin v0.11.5.

Ao atualizar o jQuery para v1.9 tive que mudar a chamada ".one" para ".on" pois ele não estava atribuindo o focus para todos os elementos da classe ".inpNota"...
E aí beleza, todos elementos voltaram ter a mascara, porém com a versão 1.1.2 do plugin aconteceu que:

• As notas começadas por "11" não atribuíram a mascara.
• As notas começadas por "1", seguidas de outros números, se digitadas rapidamente, máscara, se demora, não máscara.

Não entendo realmente o que aconteceu, mas eu que ia utilizar a versão 1.1.2 por enquanto vou ficar na antiga mesmo...

Código completo que usei com jQquery 1.7 e plugin 0.11.5:

$(function() {
  $(document).ready(function(){
    NOTA_CASAS_DECIMAIS = 1; // 1 ou 2
    var opt = {
      translation: { 0: '0' },
      onKeyPress: function(a, b, c, d) {
        console.log('OnKeyPress: ', a, b, c, d);
        if(!a)
          return;
        var reg = /^(1|10|1,|10,\d*)$/g,
            m = '';
        if(a.match(reg))
          m = NOTA_CASAS_DECIMAIS==1 ? '99,0' : '99,00';
        else
          m =NOTA_CASAS_DECIMAIS==1 ? '9,9' : '9,99';
        c.mask(m, d);
      }
    };
    var maskNota = function(a,b){
        var reg = /^(1|10|1,|10,\d*)$/g,
            m = '';
        if(a.match(reg))
          m = NOTA_CASAS_DECIMAIS==1 ? '99,0' : '99,00';
        else
          m =NOTA_CASAS_DECIMAIS==1 ? '9,9' : '9,99';
        console.log(a, b, m);
      return m;
    };
    $(document).one('focus.mask', '.inpNota', function(args){
      var el = (args.currentTarget) ? args.currentTarget : args.srcElement;
      $(el).mask(maskNota, opt);
    });
  });
});

Para funcionar com jQuery 1.9 e plugin v0.11.5, apenas mudei o método do jQuery:

$(document).on('focus.mask', '.inpNota', function(args){
  var el = (args.currentTarget) ? args.currentTarget : args.srcElement;
  $(el).mask(maskNota, opt);
});

Tentei também jogar tudo dentro do "$(document).on('focus.mask', ..." para funcionar na versão 1.1.2 mas não adiantou, ficou na mesma...

Talvez fosse interessante, ao adicionar a mascara nos elemento já usar dessa maneira "$(document).on(event, element|colection, handler)" dentro do plugin...
Num plugin que eu criei acabei usando isso e deu muito certo:

function Execute(t, col) {  // col is a Select Collection; Ex: '.inpText'
  var ns='.pSFut_'+t,       // namespace
      events=(t==='over') ? 'mouseover'+ns+' mouseout'+ns : 'focus'+ns+' focusout'+ns,
      eachEvt=events.split(' ');
  $(document).off(ns, col);
  $(document).on(eachEvt[0], col, {'t': t}, Event0);
  $(document).on(eachEvt[1], col, {'t': t}, Event1);
}

Antes eu fazia algo assim:

function Execute(t, col) {
  var ns='.pSFut_'+t,
      events=(t==='over') ? 'mouseover'+ns+' mouseout'+ns : 'focus'+ns+' focusout'+ns,
      eachEvt=events.split(' ');
  $(col).each(function(i, e) {
    var $e = $(e);
    $($e).off(ns);
    $($e).on(eachEvt[0], {'t': t}, Event0);
    $($e).on(eachEvt[1], {'t': t}, Event1);
  });
}

When typing into a masked field there is an error on line 105:

Uncaught TypeError: Object # has no method 'get'

This is because $el is returning a HTML DOM element not a jQuery object. To fix, add on line 86:

$el = $($el);

Mac Chrome 28.0.1500.71

i.e:
input.mask("Y0{1,2}"); works
input.mask("0{1,2}Y"); does not work.

Hi there. I'm using Chrome, and I can't replicate the function on the demo page.
Even in the demo page, dinamically assigned masks doesn't quite work for me.

I'm using 0.7.0, Chrome 18.0.2.

Your example are note working for me, i've tried a lot of variants, but my browser keep throwing the following exception

Uncaught SyntaxError: Invalid regular expression: /(:)?/: Stack overflow

About line 72 in your code of latest version in jquery.mask.js...
I'm talking about this example:

var SaoPauloCelphoneMask = function(phone, e, currentField, options){
    return phone.match(/^(\(?11\)? ?9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g) ? '(00) 00000-0000' : '(00) 0000-0000';
};
$(".sp_celphones").mask(SaoPauloCelphoneMask);

Anyway to solve this?
Obs.: I'm using Google Chrome lastest stable release, and i've tried Firefox that also throws the exceptions bellow:

too much recursion
var keyCode = e.keyCode || e.which;

About line 95 in your lastest code of jquery.mask.js...

I ran into an issue where the 'maxlength' attribute was not being removed when calling

$('.myinput').data('mask').remove();

I fixed the problem locally by adding the following line to the plugin.remove function

$el.removeAttr('maxlength');

however I'm not sure if this will cause other problems.

I've created a jsFiddle to demonstrate the problem.

A máscara só funciona no keyup, então se você colar um valor usando o mouse, a máscara não é aplicada. A mesma coisa acontece se o usuário usar o autocompletar do browser.

Teria como você aplicar máscara no "onchange" também?

Obrigado.

Hi,

The phone mask does not work correctly on Android default browser. When the user press "tab" or change to other field the plugin try to apply the mask removing some digits from the phone number.

Device: GT-P7510
Android version: 3.2
(Default) Browser version: 3.2-UBLA1

Sample (adapted from http://jsfiddle.net/NJMSj/30/ ):

http://jsfiddle.net/bernardobrezende/NJMSj/259/

Kind regards,
Bernardo

would be nice to be able to enter variable width masks and groups something like this

A -uppercase A-Z
a - lowercase a-z
A{1}a{1,5}([- ]{1}A{1}a{1,5}){0,1}

would translate to something like this

New-York or New York

A{1} => 1 uppercase A-Z
a{1,5} => 1 to 5 lowercase a-z

([- ]{1}A{1}a{1,5}){0,1} optional group max 1 time

[- ]{1} => space or "-" 1 time
A{1} => 1 uppercase A-Z
a{1,5} => 1 to 5 lowercase a-z

this is just a example you can have any syntax you want
or to allow regex like this /^([A-Z]{1}[a-z]{3,11}){1}([- ]{0,1}[A-Z]{1}[a-z]{3,11}){0,1}$/

Olá Igor, notei um problema que só aparece nos Browsers nativos do Android, quando o usuário começa a preencher qualquer campo com a máscara o cursor pula um caractere, deixando a experiência não muito boa, já que ele tem que parar de digitar e concertar o erro que a máscara fez.

hasOnSupport is referenced on line 82 in the unminned file, but it has no parens. Being a function call, it crashes (at least on Chrome it does).

bom dia,

como criar uma máscara para inteiros com sinal negativo opcional?
não consigo escapar o caractere - usando

.mask("S9999999999", { translation: { 'S': { pattern: /\-/, optional: true } } });

I have a control that displays height\weight - 6'01.

The current version does not support this.

A simple fix would be

            maskChars: { ':': ':', '-': '-', '.': '\\\.', '(': '\\(', ')': '\\)', '/': '\/', ',': ',', '_': '_', ' ': '\\s', '+': '\\\+', '\'': '\'' },

At "ignores", there's a missing comma between "test/" and "."

Hi, nice plugin.

Please insert plugin information at .min version.

This is useful when someone (like me) want know who wrote this plugin.

Or to verify if current version is most recent version.

[]'s
Hugo

Igor,

in your documentation, you aren't explaining the purpose of the option reverse.

And very nice and efficient plugin. Thanks a lot.

Cheers.

I haven't tested yet this new version but looking at this method

            if ($.inArray(e.keyCode || e.which, jMask.byPassKeys) === -1 && newVal !== p.val())
                p.val(newVal).change();

            return p.seekCallbacks(e, newVal);
        },

ex:
if I have a mask 99-99-9999 and I write 111 this will trigger the change event because 111 will change to 11-1 at this time this is a invalid date and the validators will inform the user that this is an invalid date.

You shouldn't trigger the change at this time or it should be a way to override it.

refs #35

The error persists. Need to tag the new version!

Boa tarde Igor, tudo bem? Espero que sim...

não há uma opção no plugin onde você informe para o campo ser limpo se a digitação do usuário não for completada de acordo com a máscara, certo?

Atualmente se o usuário não completar a digitação e sair do campo ele mantém o conteúdo.

Abraço

Todas as versões após a versão v1.1.0 deixaram de ter suporte para o shilft + home

Eu particularmente uso o shift + home, quando o caracter está posicionado no final, para selecionar todo o texto e desde a versão 1.1.0 e não é possivel.

Olá igor.
Achei seu plugin jquery Mask, achei muito bom, melhor doque o que eu usava antes, maskedinput.

Gostaria de dar algumas sugestões quanto ao meu uso dele, e talvez algumas coisas sejam apenas falta de conhecimento do plugin ^^ !!!

Bom primeiramente, estava procurando um mask para um campo senha para limitar caracteres inválidos e definir comprimento também. A boa é que não preencheu toda mascará com caracteres especiais (como no maskedinput o 'placeholder'), pois se tratando de um campo senha, seria estranho.

Vamos lá, Senti certa dificuldade em definir a mascara pelo tamanho opicional de 4 a 20 caracteres.

Primeiramente tentei isso:
$('input[type=password]').mask('A{4,4}A{0,16}');
Por regex deveria conter os 4 primeiros e poder conter outros 16 caracteres. Mas ao digitar aceita apenas 6 caracteres. Parece que no segundo regex ele conta mais 1 caractere "{0" e mais um caractere ",1" e ignora o "6}" para a mascara toda, ou seja, os 4 primeiros mais 2.

Solucionei parcialmente usando:
$('input[type=password]').mask('A{4,4}A{0,7}A{0,7}');
Nesse caso tive que usar "A{0,7}" duas vezes. Como antes, ele contou depois dos 4 primeiros, mais 8 caracteres e mais 8 caracteres, sendo então 4 + 8 + 8 = 20, sendo que nessa regra escrita deveria ser 4 + 7 + 7.

Verificando melhor vi que algumas regras não seguem como deveriam, veja exemplo:
.mask('9{4,4}S{0,4}');
Casa com: "1234abcde", mas deveria casar só com: "1234abcd".

.mask('9{4}S{0,4}');
Não casa com: "1234abcd" como deveria, mas casa com: "12abcde". Não reconheceu "{4}" como expressão regular, mas sim "{" e "}" caractere mascara (?) e "4" como um único numero.

.mask('9{4,4}S{0,4}');
Como no exemplo de cima a mascara não entendeu que era regex na primeira regra, então tentei escapar o regex usando "" mas continuou como no primeiro exemplo. O resultado foi "1234abcde".

.mask('9{4}S{0,4}');
Assim como no exemplo de cima o uso do escape "" não funcionou (foi só um teste meu a fim de explorar o plugin). O resultado foi o mesmo da mask "9{4}S{0,4}" e nos dois casos os caracteres "{" e "}" não são impressos, já que estes não foram entendidos como regex.

Mesmo usando a opção maskChars, nenhuma tentativa ('{': '{', '{': '{', '{': '{', '{': '{') faz o plugin entender "{" como caractere mascará (imprimir o caractere) invés de regex. Para isso foi necessário usar o translation ('b': '{', 'i': '}'), mas dessa forma os caracteres "{" e "}" devem ser digitados e não é colocado automáticamente.

Ainda nesse ponto do regex, quando o uso do quantificador "{,}" temos o seguinte:

"{n}": não entende como regex mas também não imprime as "chaves" ("{" e "}") como caractere mascara;
"{0,n}": usa da soma de 1 caractere "0" com o valor de "n". Ex: "{0,4}" aceita 5 caracteres;
"{1,n}": aqui, diferente do exemplo anterior funciona corretamente, aceita 1 ou n caracateres;
"{n,}": não entende a regra, ao menos "n" ou mais. Aqui imprime o caractere 2x (independente do valor de n) e não imprime mais nada depois disso;

Tentando usar o Translation com regex:

Ao aplicar uma tentativa de regex com o translation tive outro problema:
.mask('9S', {translation: {9: '[0-9]+'}});
Nesse caso seria correto de acordo com a regra aceitar quantos números fossem, seguidos de uma letra, mas o que ocorre é aceitar 1 número e 1 letra ou 2 números;

.mask('9S', {translation: {9: '[0-9]*'}});
O mesmo problema que o exemplo acima, porém casa corretamente com "a";

Bom, é isso que eu verifiquei até agora caro Igor.
Ah outra coisa interessante, seria por a opção de ter o placeholder com true ou false nas opções, com default: false.
Ah, também senti falta da função onBlur, nas options do plugin, tendo que criar um script por fora. Aqui eu usaria pra verificar o valor quando onComplete não fosse chamado.

De qualquer forma seu plugin me ajudou em 2 páginas funcionando muito melhor que o maskedinput em uma delas (mascarar notas de provas, até deixando o código bem menor) e funcionou com esse pequeno problema no caso do password, sendo que o outro plugin nem funcionou!

Aguardo ancioso seu retorno e uma nova versão corrigida para testar.

Abraço... Pyetro Sabaraense F. da Costa (http://www.pysafe.blogspot.com.br, www.pbcalc.portalsh.com.br - portalsh em construção).

data-mask on <input data-mask='' does not appear to function

Hello.
First of all, thank you so much. Thank you for take time to make this excelent plugin. Really like it.

Im trying to do the "ninth digit" (sp nono dígito) mask with "on-the-fly mask change".

Here is my code:

// $('#num_telephone') reffers to an input text field
var masks = ['9999.9999', '9.9999.9999'];
var options = {
            onKeyPress: function(telephone) {
                var mask = (telephone.length < 9) ? masks[0] : masks[1];
                $('#num_telephone').mask(mask, this);
            }
        };
        $('#num_telephone').mask(masks[0], options);

If i try to digit 123456789, until '7' it is ok, keep the 9999.9999 mask. But as soon i insert the '8' digit (should change the mask) the value of the field should be '1234.5678' but it shows '123.4', although the "maxlength" in the input tag changes to "11" as expected.

I suspect the code is updating the value just with the first part of the mask (like '1234.5678' takes just '1234').

So, in summary:
Masks should change from '1234.5678' to '1.2345.6789' but it renders '1.234'.

Thank u again and keep up the good work.

Pedro Paulo Almeida
São Paulo, Brazil

It's impossible to enter a telephone number (usa) using older Android devices

For an example visit manymo - android 2.3

then go here

Try entering any US Telephone correctly using the virtual keyboard

Na minha aplicação, atualizei o plugin para a versão v1.1.0. Eu utilizo outras funções javascripts na mesma página onde eu configurei algumas máscaras com o jQuery-Mask-Plugin. Acontece que agora, as funções não estão funcionando corretamente, por exemplo, campos para os quais eu configurei a máscara 00000000, estão aceitando letras, um outro campo de autocomplete não funciona mais. Utilizando o Firebug, está sendo apresentada uma mensagem "too much recursion". Não sei ao certo a causa real do erro, só sei que ao voltar o plugin para a versão v0.11.4 os problemas não ocorrem mais e todas as funções javascripts funcionam corretamente.

I am using your plugin inside an edit page. I am using jquery to autocomplete information and I also want to use mask without changing the value inside the input element. But here is what happening:

http://jsfiddle.net/erdemkeren/SDBFc/

Gostaria de saber como eu faço para inserir um campo onde só pode letras mas o tamanho do campo é dinâmico tipo 500 caracteres. eu sei colocar somente caracteres:
$(".cnpj").mask("SSSSS......");
Só que n posso limitar e também n vou contar 500 S entende. Como posso arrumar isto???

Prezados, fiz um teste com a versão v1.1.1 do plugin para testar uma máscara dinâmica entre CPF e CNPJ. O código está em http://jsfiddle.net/zWPs7/1/, o único detalhe adicional é que no meu código "d.byPassKeys = [];". O que ocorre é que quando digito um número 12345678900 a máscara formata corretamente tal número como CPF, mas, se eu digitar mais um dígito (ex.: 123456789000), em vez da máscara chavear para máscara de CNPJ exibindo 12.345.678/9000, a máscara continua com o formato do CPF exibindo 123.456.789-000. Da mesma forma ocorre ao apagar dígitos, é como se a máscara estivesse "demorando um dígito a mais para chavear". Lembrando que na versão v0.11.4 a mudança de máscara funcionava corretamente.

after applying masks which includes separator chars with the reverse option=true, the input's "change" event would not be triggered anymore :

$("#input1").mask("999,999,999", { reverse: true });
$("#input1").change(function()
{
alert("value changed"); //ignored
});

It would be great to have a placeholder for hexadecimal input, enabling input for mac addresses for example:

FF:FF:FF:FF:FF:FF

It would be helpful to normalize this to either caps (F) or normal letters (f), depending on the placeholder.

Please add a unmask/destroy that will call the remove method.

$.fn.unmask = function() {
return this.each(function() {
$(this).data('mask').remove();
});
};

this way the uses don't need to know that there is a data('mask')

Estou achando este plugin muito útil! Estou utilizando-o para colocar uma máscara dinâmica em um campo que aceita CPF ou CNPJ semelhante ao Crazy Zip-Code da Demo page. Está funcionando bem, no entanto, atualmente, a máscara muda apenas quando acrescentamos dígitos no input text, ou seja, ao pressionar a tecla DELETE ou BACKSPACE, a verificação da máscara não é realizada, com isso, a máscara não muda. Por exemplo, ao digitar um CNPJ: 11111111000122 a máscara (00.000.000/0000-00) apresenta corretamente no input o valor 11.111.111/0001-22. Mas, ao deletar 3 dígitos (transfando o número em CPF) a máscara deveria mudar automaticamente para 000.000.000-00 (apresentando no input 111.111.110-00) no entanto no input fica assim: 11.111.111/000.

Not sure if it's implemented, but I would like to preserve some constants while the mask is being filled: Something like this for a currency format:

jQuery(field).mask('<R$> 000.000.000.000.000,00');

So, the R$ would always be in front of the value.

Thanks for this plugin.

The object doesn't offers support to "AddEventListener" on IE7

Ao tentar usar o exemplo de codigo para mascara de telefone de sao paulo como esta no site acontece um problema de limite de caracteres no campo, ou seja, ele limita o campo a 14, porem se tiver o digito 9 teria q ser 15 caracteres mas o plugin nao deixa digitar 15 ae a mascara nao se aplica da forma correta. eu copiei e colei exatamente o mesmo codigo de exemplo do site. estou usando google chrome no mac os