Mascara Javascript para os novos telefones de São Paulo

Posted byigorescobarPosted inJavascript, jQueryTags:,

Olá pessoal,

“O presidente da Anatel (Agência Nacional de Telecomunicações), João Rezende, informou nesta sexta-feira que o acréscimo do nono dígito aos números de celulares da região metropolitana de São Paulo vai garantir 53 milhões de novas combinações numéricas.”
http://www1.folha.uol.com.br/mercado/1040493-nono-digito-garante-53-mi-de-novos-numeros-de-celular-em-sp.shtml

(\___/)
( ͡ ͡° ͜ ʖ ͡ ͡°)
\╭☞ \╭☞ Follow me on Twitter!

Sabendo disso, é importante começarmos a pensar em soluções para atender as mascaras de telefone de todo o Brasil e também para região metropolitana de São Paulo.

Já faz uns meses que falei sobre o  jQuery Mask Plugin. E desta vez, também vamos resolver este mesmo problema com o ele. Criei um exemplo no jsFiddle de como resolver da mascara javascript com o novo nono dígito nos telefones celulares de São Paulo. Você pode ver o exemplo funcionando aqui: http://jsfiddle.net/d29m6enx/2/

E o código é este:

[javascript]
// using jQuery Mask Plugin v1.7.5
// http://jsfiddle.net/d29m6enx/2/
var maskBehavior = function (val) {
 return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
options = {onKeyPress: function(val, e, field, options) {
 field.mask(maskBehavior.apply({}, arguments), options);
 }
};

$('.phone').mask(maskBehavior, options);
[/javascript]

Desta forma, atendemos todos os números de telefone do Brasil e também atendemos a nova forma da Anatel para os telefones da região metropolitana de São Paulo, simples, certo? Ainda bem que tive a ideia de implementar estes eventos nas mascaras antes mesmo desta norma da Anatel 🙂

É isso, simples e objetivo!

UPDATE 10/10/2014

Eu e o @dgmike fizemos uma versão um pouco mais otimizada da solução apresentada pelo Bruno Porto em comentário:
http://jsfiddle.net/d29m6enx/2/

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 !

90 thoughts on “Mascara Javascript para os novos telefones de São Paulo”

    1. É verdade, a resolução serve somente para telefones celulares, porém, o seu fork só resolve para telefones celulares que começam com 9. Telefones celulares começam com 7,8 e 9.

      Like

      Reply

  2. Mas agora todos os celulares começam com 9, não? O meu, por exemplo, começava com 7 (7999-…); agora começa com 9 (97999-…).

    Like

    Reply

  3. A expressão ficou assim:
    \(11\) 9(9|8|7)).+/i

    Ou seja, se você digitar o celular já com o novo digito, ele vai considerar a regra somente a partir do segundo digito após o nono dígito. Celulares que começam com 9, 8 e 7 também vai aderir a nova mascara. Alterei o link do fiddle no post e da para você ver funcionando. 🙂

    Like

    Reply

  5. @diego Foi só um exemplo 🙂

    Para funcionar com mais de um campo o exemplo tem que ser mais elaborado:

    var options = {onKeyPress: function(phone, e){

    $target = “.” + $(e.target).closest(‘input’).attr(‘class’);

    if(/(\(11\) 9(9|8|7)).+/i.test(phone)){
    $($target).mask(‘(00) 00000-0000’, options);
    } else {
    $($target).mask(‘(00) 0000-0000’, options);
    }

    }};

    $(‘.sao_paulo_phone_number’).mask(‘(00) 0000-0000’, options);
    $(‘.sao_paulo_phone_number2’).mask(‘(00) 0000-0000’, options);

    ​

    Like

    Reply

  6. Beleza cara, é que voce estava usando um seletor de classe, mas di boa, ótimo trabalho voce fez com esse plugin, está sendo muito útil, parabéns!

    Like

    Reply

  9. Trabalhei em algumas melhorias no plugin esta noite, já deu pra ver que o código já ficou diferente e agora vocês não teram mais problemas com seletores de classes etc.

    Tive que usar o target no exemplo anterior para “driblar” uma limitação que encontrei decorrente destas necessidades no callback. Agora ficou show 😉

    Like

    Reply

  12. como que eu faco para usar essa mascara chamando a funcao no onkeypress?!?!? como ficaria a funcao no arquivo js?!?!?! obrigado…

    Like

    Reply

  13. Eu vi o exemplo, mas no exemplo vc trata como uma classe… Eu nao sei como alterar isso para chamar a funcao no onkeypress e colocar essa funcao no meu arquivo junto com outras mascaras…

    Like

    Reply

  14. cara deixei minha funcao assim… mas ainda sim nao funciona… voce sabe me dizer o que esta errado?!?!?

    function MascaraCel(cel){
    if(/(\(11\) 9(9|8|7)).+/i.test(cel))
    return formataCampo(cel, ‘(00) 00000-0000’, event);
    else
    return formataCampo(cel, ‘(00) 0000-0000’, event);
    }

    Like

    Reply

  15. Adam,
    Todo o código que você precisa para implementar é o que está no post, nada mais.
    Basta trocar o seletor jquery $(‘.sao_paulo_phone_number’) para o elemento que você quer aplicar a mascara, não tem segredo.

    Like

    Reply

  16. ja fiz todas as mudancas possiveis que veio a minha cabeca e nada funcionou… relamente nao sei o que eu estou fazendo de errado…

    Like

    Reply

  19. Boa Tarde,

    Está me retornando a seguinte mensagem de erro no Firefox através do Firebug:

    too much recursion
    …unction(h.promise)?h.promise().then(d.resolve,d.reject):d[g](h)}):b[a](d[g])})})…

    Alguém poderia me dar um help?
    Está funcionando normalmente mas está lento o processamento na hora que está sendo digitado o número do telefone.

    Like

    Reply

  21. Estamos usando em um projeto seu plugin, diga-se de passagem muito bacana. Mas estamos com um pequeno problema para telefones de SP.
    Quando o valor do telefone vem do servidor, o plugin deixa o campo de texto formatado inicialmente com: (99) 9999-9999 e o valor mesmo sendo com um dígito a mais acaba sendo limitado pela máscara que está no campo.

    Like

    Reply

  22. É o mesmo código cara, funciona perfeito quando o usuário está digitando. Nosso único problema é quando vamos carregar um registro do bd. Exemplo: vou alterar um cliente, mesmo no banco de dados estando o telefone com os dígitos 11999999999, acaba saindo nesse formato (11)9999-9999.

    Vou tentar alterar o JQuery que seta a máscara, para verificar o tamanho da string e aí sim setar a máscara, pois ela só está sendo alterada no keyPress.

    Olha como está hoje:
    “$(‘.sao_paulo_phone_number’).mask(‘(00) 0000-0000’,…..”

    Se eu conseguir condicionar o momento em que a máscara está sendo setada, acredito que consigo solucionar meu problema.

    Like

    Reply

  23. Eu tive o mesmo problema que você e foi assim que eu resolvi:


    // using: https://github.com/igorescobar/jQuery-Mask-Plugin
    // version: v0.5.0+
    var SPphoneMask = 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(SPphoneMask, {onKeyPress: function(phone, e, currentField, options){
    $(currentField).mask(SPphoneMask(phone), options);
    }});

    view raw

    phonemask.js

    hosted with ❤ by GitHub

    Like

    Reply

  24. No meu caso o dado já vem formatado pelo sistema (00) 00000-0000 então talvez você precise adaptar a linha 12:
    mask = phone_field.val().match(phone_mask) ? ‘(00) 00000-0000’ : ‘(00) 0000-0000’;

    Like

    Reply

  25. Só tive que tirar o scope daqui: phone_fields = $(“.phone”, scope);

    E funcionou perfeitamente! Muitíssimo Obrigado Sr. Igor Escobar!

    Like

    Reply

  27. Pessoal, na versão v.0.5.0 do jQuery Mask Plugin vocês já podem passar uma função como mascara e implementar a logica de inicialização da mascara. Desta forma fica mais elegante a forma como resolvemos o problema das mascaras para celulares de SP.

    Antes era assim: https://gist.github.com/3724610/a645335f693b1b7cf00838ab87aded5b58033beb
    Com a versão nova fica assim:
    https://gist.github.com/3724610/5003f97804ea1e62a3182e21c3b0d3ae3b657dd9

    []’s
    Igor.

    Like

    Reply

  28. Olha eu “quase” não entendo nada de programação rsss
    Sou apenas curiosa, mas consegui usar tudo direitinho, inclusive tenho três campos de telefones, como não sabia como fazer rsss, usei três class diferentes.
    Obrigada pela dica, ajudou e muito!

    Like

    Reply

  29. Boa tarde Igor teria como fazer uma alteração para verificar o numero na hora da digitacao e inserir automaticamente o numero 9 ? Tentei de varias formas e nao consegui. Na sua mascara só funciona se a pessoa digitar o numero 9.

    Obrigado

    Like

    Reply

    1. O objetivo do plugin é só fazer a mascara mesmo, Isabela. Mas você pode usar o evento onComplete ou o OnKeyUp da mascara para chamar algum plugin de validação que você esteja usando e fazer as devidas validações no campo.

      – Igor

      Like

      Reply

  32. Sensacional seu plugin Igor, parabéns.
    Mas tenho uma dúvida, se eu preencher o campo com um número: 11 7150-0521
    e depois voltar no campo e quiser incluir o 9o dígito a máscara não permite, eu preciso limpar o campo e inserir novamente. Existe alguma maneira de contornar isso?

    Att.

    Like

    Reply

    1. Olá @Aclébson.

      Não entendi o seu problema. O código que consta no post avalia a mascara que deve ser preenchida a cada número imputado. É importante entender como o código funcionda. Não é qualquer telefone que deve ter o digito a mais. Somente os telefones celulares que iniciam com 9 + 5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9] deve ter o digito à mais. Caso contrário a máscara não se aplica. O caso que você mencionou é realmente necessário pois o plugin precisa avaliar o numero de telefone inputado antes de decidir se deve ou não aplicar o dígito adicional.

      – Igor

      Like

      Reply

  33. O único problema aqui, para que a coisa ficasse mesmo boa, é que o 9º dígito não será apenas para São Paulo, mas será implantado aos poucos para todo o Brasil. Veja que a Vivo já me mandou um SMS próximo de Araraquara, informando que a partir de agosto, meu celular terá 9 dígitos, com um 9 adicionado antes do meu número atual.
    Então, expressões regulares que não formatem qualquer número de telefone iniciado por 9 com 9 dígitos, estão fadadas a ficarem desatualizadas muito rapidamente.

    Obrigado.

    Like

    Reply

  34. Igor, parabens pela ideia do plugin.

    Seguindo a duvida do colega sobre remoção da mascara, comitou essa funcionalidade?

    Nao consegui remover e nem setar letras e numeros como solução de contorno

    $(‘meu_textbox’).???

    Obrigado pela ajuda, caso tenha como me ajudar.

    Like

    Reply

  36. Olá Igor,

    Como eu posso usar o callback de um campo como no exemplo dado no campo CEP , porém com o método .live do jquery?

    Obrigado

    Like

    Reply

  37. A máscara funcionou bacana aqui mas não consigo deixar genérica para todo o Brasil, só consigo fazer funcionar para um DDD específico.

    Like

    Reply

  38. Igor, muito bom esse código, ajudou bastante a gente aqui na empresa.
    Porém, alguns usuários reclamaram que não funcionou no IE <= 8.
    Refiz o código e ficou assim:

    var SPphoneMask = function(phone, e, currentField, options) {
    return /^(\(1[1-9]\)? ?9)/g.test(phone) ? '(00) 00000-0000' : '(00) 0000-0000';
    };

    Desse modo, funciona tanto no Chrome, FF e IEca

    Like

    Reply

  39. Igor.. parabéns!.
    Porém $(‘.sp_celphones’).mask(“(00) 0{4,5}-0000”); não deu certo aqui. quando digito o 2º digito após o espaço ele preenche com a string ‘{4,5}’ em vez de usar esta regra.

    Tou usando a ver. 1.1.2 … chrome e ff.

    Like

    Reply

  40. Oi Igor, primeiramente parabéns por este plugin que é um grande facilitador.
    Estou tendo um “problema” com a resolução para o novo digito que passou a vigorar em outros estados além de São Paulo.
    Implementei o código que vc deixou “.mask(‘(00) 00009-0000’)”. Porém acredito que o 9 (‘que indica opcional’) pode não estar executando corretamente pois:
    quando coloco 8 digitos: (11) 75368-022, quando coloco 9 digitos: (11) 93358-0022.
    Alterei um exemplo seu para este exemplo http://jsfiddle.net/NJMSj/289/
    É este mesmo o comportamento esperado ?
    Abs

    Like

    Reply

  43. como que faz pra usar isso em situações em que é carregado por AJAX, após o carregamento do DOM utilizando o on()?
    Tentei algumas coisas aqui mas nada que funcione corretamente.

    Like

    Reply

  44. Prezado estou a procura de uma solução para o caso, notei que para o input sua solução é ótima, ela funciona quando o usuário estiver apenas percorrendo os registros? ou seja a mascara será aplicada de forma dinâmica quando o usuário percorrer os registros existentes no cadastro? ou somente na hora de digitar os dados?

    Like

    Reply

    1. @Robson O ideal é que no banco de dados fique sempre sem os caracteres de mascara. Você só aplica as mascaras campos de formulário e em elementos HTML como DIVs, SPANs etc. jQuery Mask Plugin aplica mascaras em elementos HTML também, não somente inputs.

      Like

      Reply

  45. Olá Igor boa tarde!

    Meu componente é do tipo text, e sim eu não gravo formatação no banco, minha unica duvida era se quando o formulário estivesse no modo de navegação a mascara também atuaria.

    Like

    Reply

  46. Prezado vou tentar implementar a solução com o plugin agora, deixe-me fazer uma pergunta de leigo ( que realmente sou porque desenvolvo em web/java mais não sou expert no dialeto )

    o que é callback ?

    Like

    Reply

  48. Ei gostei muito do plugin, facilita para caramba a vida, mas, percebi que a máscara não é reaplicada quando o backspace é pressionado. Eu estava testando pressionando 99999999999 e ele colocou a máscara (99)99999-9999 até aí beleza, porém quando você pressiona backspace, ao invés de ele aplicar a máscara (99)9999-9999 ele fica (99)99999-999. Como posso contornar isso, estou usando o seu exemplo do fiddle, tentei usar regex para que quando ficasse daquele jeito, ele mudasse a máscara, mas, nada acontecia. Usei console.info e vi que realmente não estava disparando o evento.

    Like

    Reply

  50. Igor, Foi bem simples. Estava faltando apenas o 9, na máscara do CPF. Toda a lógica já estava implementada. Obrigado pela dica. Observei que, quando utilizo a função unmask() para remover as máscaras de edição, eu perco um caractere do CNPJ. Isso só acontece com o CNPJ. No mais seu projeto é excelente. Parabéns!

    Like

    Reply

Leave a reply to Vinicius Monteiro Cancel reply