Como foi muito divulgado, hoje os números de celulares de São Paulo (DDD 11) ganharam mais um dígito. Por este motivo, estou passando rapidamente para compartilhar a minha solução para a nova máscara.

Motivo da mudança

A mudança nos números segue a Resolução nº 553/2010 da Anatel e tem como objetivo eliminar o problema de falta de numeração da área de registro 11. Os números passarão a ter o formato (11) 9XXXX-XXXX com o acréscimo do nono dígito à esquerda.

A medida elevará a capacidade de numeração da região 11 para 370 milhões, eliminando definitivamente o problema de escassez de numeração móvel em São Paulo.

Máscara

Em meus projetos utilizo o plugin jQuery Masked Input ou o jQuery Meio Mask para adicionar máscaras aos campos dos formulários. A utilização de ambos é muito simples. Ambos também são compatível com IE6. Recomendo! ^^

Os números de telefone fixo não sofreram alteração, então continam com a mascará antiga:

JQuery Masked Input

Para celulares, utilizaremos o carácter ? que permite uma exceção a máscara, alterando ela para o seguinte formato: (99) 9999-9999?9. Porém, não queremos adicionar um dígito no final, mas deixa-lo com 5 dígitos de prefixo. Para isso, adicionamos um evento para quando o usuário deixar o campo, o mesmo tenha sua mascará ajustada.

jQuery Meio Mask

Adicionaremos um digito a mais no final da máscara ficando assim: (99) 9999-99999. Depois adicionamos o evento de substituição da máscara de acordo com o número informado.

Atualização: 18/12/2013

Muitas almas caridosas postaram diversas maneiras de fazer a mascará nos comentários abaixo. Todas estão funcionando. Escolha!

PS: A maioria deles alegam ser a melhor forma de fazer… rs… sabe como é, orgulho de de programador =)

Simples não?
Até a próxima.

Quer copiar esse post no seu site? Você pode!

Segundo a licença da Creative Commons 3.0 (CC BY SA 3.0) você pode copiar e distribuir esse conteúdo desde que faça menção ao autor original, para isso é só copiar esse código no final do artigo quando for publicá-lo em seu site:

<p>Artigo originalmente publicado em <em>29 de julho de 2012</em> por <strong><a href="http://pedroelsner.com/" title="Pedro Elsner, Profissional de TI - São Paulo">Pedro Elsner</a></strong>: <a href="http://pedroelsner.com/2012/07/mascara-jquery-para-novo-digito-de-celular-em-sao-paulo/" title="Máscara jQuery para novo dígito de celular em São Paulo">Máscara jQuery para novo dígito de celular em São Paulo</a></p>
A não menção ao autor original da obra implicará em cópia e/ou distribuição ilegal de propriedade intelectual, o que é crime segundo a Lei n.º 9.610.
  • David Ciasca

    Grande Pedro ! Obrigado…

  • Cara, muito obrigado. Pensei que ia ter que ralar trocando tudo e deixar zuado ainda… Ótima solução! Valeu mesmo!

  • Caique_novais

    Como usa o jQuery Masked Input, não sei usar jQuery um amigo recomendou pra mim teria como me indicar algum curso ou tutorial para eu saber um pouco mais dessa ferrameta?

  • Legal Pedro, apenas alguns comentários sobre como melhorar teu código:

    .live já era, deves utilizar .on (fonte http://api.jquery.com/live/)

    Rewriting the .live() method in terms of its successors
    is straightforward; these are templates for equivalent calls for all
    three event attachment methods:

    $(selector).live(events, data, handler); // jQuery 1.3+
    $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
    $(document).on(events, selector, data, handler); // jQuery 1.7+a nova máscara recomendada é (99) 999-999-999 (fonte http://g1.globo.com/sao-paulo/noticia/2012/08/neurologista-indica-dividir-novos-celulares-com-9-digitos-em-3-blocos.html)Abraços,Gabriel
     

  • Gabriel,

    A função live nunca deixará de existir. Alias, nenhuma das três apresentadas acima tem qualquer diferença entre si, uma vez que apenas o nome muda. Portanto, utilizando live a rotina fica funcional para qualquer versão jQuery, sem nenhum custo para a aplicação.

    Sobre o formato da máscara, segue link do site da própria Anatel com a recomendação 9xxxx-xxxx: http://www.anatel.gov.br/Portal/exibirPortalNoticias.do?acao=carregaNoticia&codigo=26182

  • Gabriel H.

    Sensacional. Parabéns pela solução.

  • Pablo Batista

    Pedro, excelente tutorial. 
    Só uma sugestão.

    Eu precisava exibir automaticamente a mascara quando carregava  o telefone do banco de dados então fiz uma adaptação do seu código.

    Ao invés de usar  *** live(‘focusout’, function(event) ***
    Eu usei *** .ready(function() ***
     $(”
    #celular “).mask(“(99) 9999-9999″).ready(function(){    var target, phone, element;    target = (event.currentTarget) ? event.currentTarget : event.srcElement;    phone = target.value.replace(/D/g, ”);    element = $(target);    element.unmask();    if(phone.length > 10) {        element.mask(“(99) 99999-999?9”);    } else {        element.mask(“(99) 9999-9999?9”);      }});

  • Grande Pablo! =)
    Já atualizei o post. Muito Obrigado!

  • Hotforms

    Eu não consegui utilizar assim com MVC, não sei nem se é culpa do MVC, mas resolvi assim:

    $(‘.CelNumber’).mask(“(99) 9999-9999?9″);            $(‘.CelNumber’).blur(function(event) {                var target, phone, element;                target = (event.currentTarget) ? event.currentTarget : event.srcElement;                phone = target.value.replace(/D/g, ”);                element = $(target);                element.unmask();                if(phone.length > 10)                {                    element.mask(“(99) 99999-999?9”);                }                else                 {                    element.mask(“(99) 9999-9999?9”);                  }            });

  • Eduardo

    Caras, não consigo fazer esse codigo do Meio Mask funcionar. Recebo um erro de a variavel “target” está undefined. Por acaso isso tem a ver com a versao do meio mask ou do jquery que estou usando? Obrigado.

  • Olá Pedro, resolvi este problema assim:

    $(“#celular”).focus(function(){$(this).mask(“(99)
    9999-9999?9”,{completed:function(){$(this).mask(“(99)
    99999-9999”);}})});

    Ainda acrescento uma função de “autotab” no “completed” que quando o usuário digita o numero extra o focus pula e aplica a mascara novamente de maneira automática e se o focus é perdido faltando apenas o ultimo numero fica tudo como era antes!

    Valeu e espero ter contribuido!

  • Show! Obrigado Guilherme =)

  • Maykonnmetal

    Estou com o mesmo problema.

  • Pedro… realmente não consegui utilizar do jeito que voce postou.
    Fiz algumas modificações e acabou por ficar assim:
    [code]
        $(‘.mask-telefone’).focusout(function(){
            var phone, element;
            element = $(this);
            element.unmask();
            /* removo tudo que não for numeros (D) */
            phone = element.val().replace(/D/g, ”);
            if(phone.length > 10) {
                element.mask(“(99) 99999-999?9”);
            } else {
                element.mask(“(99) 9999-9999?9”);
            }
        }).trigger(‘focusout’);
    [/code]
    Não achei muito adequado utlizar o .ready por não conseguir pegar o “target”.
    Acho que não da certo com a versão mais nova do jQuery pelo fato dele identificar o .ready somente para o $(document).
    Obrigado pelo codigo base.

  • Obrigado Irineu,
    Atualizei o post! =)

  • Tem um outro approach usando o jQuery Mask: http://www.igorescobar.com/blog/2012/07/29/mascara-javascript-para-os-novos-telefones-de-sao-paulo/  😉

  • Cara… muito boa a solução… bem mais simples e mais rapida a aplicação do que muitas que tem na net….. eu tive problemas com a var target então usei a segunda solução do Mask. Vlw

  • Modifiquei um pouco seu código para me atender.

    $(‘#Celular’).focus(function(){
    $(this).unmask();
    $(this).mask(“(99) 99999999?9″,{placeholder:” “});
    if($(this).mask().length 10 && ddd == ’11’) {
    element.mask(“(99) 99999-999?9″,{placeholder:” “});
    element.unmask();
    } else {
    if(ddd != ’11’ && phone.length > 10){
    element.val(element.val().substring(0, element.val().length – 1));
    }
    element.mask(“(99) 9999-9999?9″,{placeholder:” “});
    element.unmask();
    }
    });

  • Marcelo

    Muito bom mesmo! Valeu Pedro

  • Pedro

    Parabéns, mto util.

  • Assunto velho, eu sei. Mas caí aqui para ver a máscara para o nono dígito e encontrei sei comentário. A propósito, muito bom seu texto.
    Quanto à máscara, embora tenha essa que você informa segundo a ANATEL, eu gosto muito de usar assim: XXX.XXX.XXX. Creio que essa divisão fica mais fácil entender o número. Apenas questão de gosto pessoal.

    Mais uma vez, parabéns pelo texto e blog.

  • Valeu Danilo =)

  • José Ivan Marciano Junior

    Valeu Pedro, consegui fazer o tratamento através do método do Irineu, apenas fiz algumas atualizações:

    $(‘#telefone’).focusin(function(){ $(‘#telefone’).mask(“(99) 99999999?9″); });
    $(‘#telefone’).focusout(function(){
    var phone, element;
    element = $(this);
    element.unmask();
    phone = element.val().replace(/D/g, ”);
    if(phone.length > 10) {
    element.mask(“(99) 99999-999?9”);
    } else {
    element.mask(“(99) 9999-9999?9”);
    }
    }).trigger(‘focusout’);

    Eu retino o hifen no meio do número, quando o campo recebe foco.

  • Fernando Fernandes

    VALEW!!!!! Mais uma vida salva aqui o/

  • julio falcao

    A seguir. Somente números + DDD + tel 8 “OU” 9 dígitos + tratamento para “ç e Ç”

    By: †‡Falcão‡†

    js: Assinatura(NomeCampo)

    function telefone(a) { $(a).keyup(function (f) { if ((f.keyCode > 64 && f.keyCode < 91) || f.keyCode == 186) { var d = (String.fromCharCode(f.keyCode)).toUpperCase(); var c = (a.value.charAt(a.value.length – 1)).toUpperCase(); if (d == c || c == "Ç" || c == "ç") { a.value = a.value.substring(0, (a.value.length – 1)) } } }); separador = "("; separador1 = ")"; separador2 = "-"; conjunto1 = 0; conjunto2 = 3; conjunto3 = 8; if (a.value.length 13) { a.value = a.value.replace(“-“, “”); a.value = a.value.substring(0, 9) + separador2 + a.value.substr(9, 4) } } } };

  • Cesar Filho

    Pessoal,estou começando a usar o masked input e quando abro uma div via ajax com os dados do formulário, os campos com mascara vez todos com a mascara preenchida com zero ex:. telefone (00) 0000-0000. Alguém sabe o problema

  • Marnei

    Muito obrigado Pedro… excelente dica! Grande abraço!

  • André Barbosa

    Coloca só isso que funfa

    $(function() {
    if(“.tel2”.length > 10) {
    $(“.tel2”).mask(“(99) 99999-999?9”);
    } else {
    $(“.tel2”).mask(“(99) 9999-9999?9”);
    }
    });

  • Tulio Marchetto

    Para quem preferir parecido com o iOS:

    $(“.telefone”).mask(“(99) 9999-9999?9″,{placeholder:” “}).focus(function() {
    $(this).keyup(function() {
    numeros = $(this).val().replace(/D/g, ”);
    if(numeros.length == 11) { $(this).mask(“(99) 99999-9999″,{placeholder:” “}); }
    if(numeros.length == 10) { $(this).mask(“(99) 9999-9999?9″,{placeholder:” “}); }
    });
    });

  • Alex Willyan

    Obrigado me ajudou em um problema crica sua mascara jquery…. 🙂

  • Luis Gustavo

    Pessoal, algum de vocês já teve o problema de o caracter do digito opcional (que é o “?”) ficar aparecendo, seguindo o exemplo da mascara:

    Eu digito: 44999999999 (11 digitos)
    e aparece: (44) 99999-999?9

  • Thais Ribeiro

    comigo também acontece a mesma coisa

  • Felipe Machado Goose

    Boooa… Pedro…
    Óootimo… Irineu…

    vlw!!

  • Thomas .

    Dá pra resolver o erro com o target na solução original com uma condição (apesar de que a solução do Irineu ficou mais elegante 🙂


    $('#celular').mask("(99) 9999-9999?9").ready(function(event) {
    var target, phone, element;
    if (event.currentTarget || event.srcElement) {
    target = (event.currentTarget) ? event.currentTarget : event.srcElement;
    phone = target.value.replace(/D/g, '');
    element = $(target);
    element.unmask();
    if(phone.length > 10) {
    element.mask("(99) 99999-999?9");
    } else {
    element.mask("(99) 9999-9999?9");
    }
    }
    });

  • Minha sugestão:

    $(“.mascara.telefone”).mask(‘(99) 9999-9999?9’);

    $(“.mascara.telefone”).keyup(function(){

    var phone, element;

    element = $(this);

    phone = element.val().replace(/D/g, ”);

    if(phone.length > 10) {

    element.unmask();

    element.mask(“(99) 99999-999?9”);

    } else if (phone.length == 10) {

    element.unmask();

    element.mask(“(99) 9999-9999?9”);

    }

    }).trigger(‘keyup’);

  • Ederson Florencio

    ok, perfeito.. mas e se eu não quiser colocar o DDD no mesmo campo?… como funciona?

  • Gustavo Rupp Santos

    Olá Guilherme, o seu possui uma experiência ruim quando digitado todos os 11 números e dps removido um número – por exemplo, qndo o usuário esbarrar no teclado numérico ou digitar o último numero 2x.
    Após esse acontecimento e no momento do focusout, o campo é limpado e o usuário tem q digitar tudo novamente.

  • Leandro Bisolo

    Olá Ederson usei o Script do Tulio porém adaptei para 8 ou 9 dígitos sem o DDD…..

    $(“.telefone”).mask(“9999 9999?9″,{placeholder:” “}).focus(function() {
    $(this).keyup(function() {
    numeros = $(this).val().replace(/D/g, ”);
    if(numeros.length == 9) { $(this).mask(“99999-9999″,{placeholder:” “}); }
    if(numeros.length == 8) { $(this).mask(“9999-9999?9″,{placeholder:” “}); }
    });
    });

    Só não esquece de colocar no input a class=”telefone”

  • Wellington Dantas

    Galera se alguém estiver tendo problema na reutilização da mascara quando usa $Ajax, basta ao envés de usar $().mask().ready() usar $().mask().change() vai funcionar perfect…

  • Fagner Valente

    Vlw! Tive problema com o “target” e a segundo opção me salvou! Mas o que ocasiona este problema? Alguém já descobriu?

  • Taiza Montenegro

    Tb ocorre isso comigo… alguem sabe dizer pq?

  • Pode ser a versão do jQuery Masked Input, teste o exemplo utilizando a jQuery Meio Mask

  • Taiza Montenegro

    Putsss foi besteira minha… tava usando o plugin jQuery Mask Plugin, em vez do jQuery Masked Input. Apontei pro JS certo e deu certo, muito obrigada! 🙂

  • Ederson Florencio

    Leandro, está perfeito!!.. vlws cara… hoje que lembrei de ver isso… kkkkkk

  • Márcio Simão

    Existe também esta opção: https://github.com/masimao/maskbrphone

  • Felipe Duardo

    Estou trabalhando em um sistema que utiliza masked input e nenhum solução apresentada tem uma boa usabilidade…
    funciona na primeira entrada, mas caso você tenha que apagar o numero do input e fazer uma nova entrada a mascara fica toda desconfigurada..

  • Vinicius

    Muito bom, código simples e funcional, parabéns e obrigado =D

  • Bruno Sotto

    fiz assim

    $(“#formAddSocios input[name=’tel’]”).mask(“(99)9999-9999?9″).keyup(function() {

    element = $(this);

    phone = element.val().replace(/D/g, ”);

    if(phone.length > 10) {

    element.mask(“(99)99999-999?9”);

    } else if(phone.length == 10) {

    element.mask(“(99)9999-9999?9”);

    }

    });

  • Tiago

    Brother Pedro! Cara, eu não entendo como fazer esse código funcionar, já utilizo o plugin Masked Input e com ele várias mascarás, porém não consigo fazer esse seu código do 9º digíto funcionar…

    Esse códido eu já colei na página html do formulário e nada (tenho linkado os arquivos Jquery tudo certinho)… tenho que colar esse código em qual arquivo???