Mascara Javascript para os novos telefones de São Paulo

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

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:

// 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);

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 !

#engineer #founder

Twitter   LinkedIn  

Posts Relacionados:

88 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.

  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-…).

  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. 🙂

  4. @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);

  5. 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!

  6. 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 😉

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

  8. 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…

  9. 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);
    }

  10. 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.

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

  12. 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.

  13. 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.

  14. É 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.

  15. 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’;

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

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

  17. 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.

  18. 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!

  19. 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

  20. Igor, bom dia!
    Teria como fazer alguma validaçao para saber se os campos foram digitados corretamente, antes de salvar?

  21. 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

  22. 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.

  23. 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

  24. 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.

  25. 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.

  26. Obrigadão ai em, deu certo aqui pra mim, estava a dias procurando uma solução dessa!!!

  27. 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

  28. 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.

  29. 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

  30. 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.

  31. 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

Leave a Reply

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