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 !

software engineer @hole19golf, #javascript #nodejs #ruby #java #php #scala #python

Twitter LinkedIn 

Be Sociable, Share!

Posts Relacionados:

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

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

  2. 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?

  3. @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.

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

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

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

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

  8. Só tem 1 problema…

    Se vc gravar no banco sem formatação, você terá que limpar valor do campo antes de pegar o length dele.

    var masks = [‘(00) 0000-00009’, ‘(00) 00000-0000’],
    maskBehavior = function(val, e, field, options) {
    var length = val.replace(/[()\-\s]+/g,”).length;
    return length < 11 ? masks[0] : masks[1];
    };

    assim, quando vc embutir o valor no input apos retornar o valor do banco, ele terá 11 caracteres, pois não contará as mascaras….

  9. @Bruno Sempre salve as informações no banco sem formatação, sempre. E não coloque isso no JavaScript. Este comportamento deve ser assegurado na camada de modelos da sua aplicação. Com relação ao problema que você mencionou, é só mudar a implementação da mascara… se vocês não conseguirem resolver nos próximos dias eu resolvo e posto aqui.

  10. Conforme decisão da ANATEL, o nono dígito foi implantado no RJ também, mas não em todos os DDDs, portanto minha sugestão de Regex para mascarar corretamente o nono dígito é:

    $(‘#campo_celular’).mask(‘(00) 0000-0000’,
    {
    onKeyPress: function(phone, e, currentField, options) {
    var nonoDigito = phone.match(/^(\((1[23456789]|2[124])\) 9(5[0-9]|6[0-9]|7[01234569]|8[0-9]|9[0-9])[0-9]{1})/g);
    nonoDigito ? $(currentField).mask(‘(00) 00000-0000’, options) : $(currentField).mask(‘(00) 0000-0000’, options)
    }
    });

  11. Deixo a sugestão de colocar esse update “http://jsfiddle.net/NJMSj/291/” no post principal. Fiquei a a tarde toda até fazer isso por conta e agora vim conferir para enviar a atualização e já estava feita nos comentários. Abraço.

  12. Quando o campo vier de um banco de dados não formatado (somente números), altere essa linha:
    return val.length > 14 ? masks[0] : masks[1];
    POR
    return val.length==11 || val.length > 14 ? masks[0] : masks[1];

    Desse exemplo:
    http://jsfiddle.net/NJMSj/350/

  13. Parabéns pelo plugin, bem funcional e flexível…Muito obrigado, me economizou bastante tempo…

    Precisei implementar a máscara para campos de Latitude e Longitude, caso alguém precise, segue meu código para exemplo:

    $(“#txtLatitude, #txtLongitude”).mask(“~00.00######”, { ‘translation’ : { ‘~’ : { ‘pattern’ : /-/, optional : true } } } );

    Se alguém precisar aumentar a as casas decimais é só adiciona “#” no final da máscara…

    Implementei também o 9 digito, fiz uma implementação que não leva em consideração o DDD, pois em breve (2016 se não me engano) será adotado para todo o país. Segue exemplo:

    var masks = [“(00) 0000-0000#”, “(00) 00000-0000”];
    var celphoneOptions = {
    onKeyPress: function(celphone){
    mask = (celphone.length > 14) ? masks[1] : masks[0];
    $(“#txtCelphone”).mask(mask, this);
    }
    };
    $(“#txtCelphone”).mask(masks[0], celphoneOptions);

    Espero ter ajudado, Valews…

  14. Bom dia, nessa encontrada para resolver o problema dos telefones de SP, o plugin está com um comportamento estranho, impossibilitando que eu possa alterar ou navegar (com as setas do teclado) um número específico. Está sempre empurrando o cursor do teclado para o final do input. Alguém sabe como resolver isso?

    att

  15. Olá Igor, parabéns pelo plugin, é realmente ótimo! Em testes observei o seguinte no console do Firefox: “Eventos Mutation não devem mais ser usados. No lugar, use MutationObserver.” Suponho que o “DOMNodeInserted” não será mais suportado em breve nesse navegador. Você pensa em atualizar o código? Gostaria muito de usar em produção aqui, mas fiquei preocupado com esse detalhe… 😉

  16. Igor, estou com um problema no firefox.
    Usando para validar os campos HTML 5.
    Ao usar as mascaras os inputs ficam com borda vermelha.
    Pode me ajudar a resolver isso?
    Obrigado.

  17. como colocar essa solucao usando data-mask (data-mask-phone=true)?
    $.validator.addMethod(“phone”,
    function(value, element, param) {

    return ???
    }, “telefone erro”
    );

Leave a Reply

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