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

(\___/)
( ͡ ͡° ͜ ʖ ͡ ͡°)
\╭☞ \╭☞ 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 !

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

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

    Like

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

      Like

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

    Like

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

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

    Like

  9. Igor, boa tarde,
    Estou utilizando seu plugin com AngularJS, utilizando diretiva retorno do tipo atributo, no html eu indico a mascara que quero utilizar, gostaria de saber como utilizar o reverse do plugin com diretivas do angular do tipo atributo

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: