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

    Muito bom. Me ajudou! 😉

  • Boa Tarde

    Tiago eu usei o meiomask assim

    segue código, só depois verifique se as aspas estão corretas ok?

    jQuery(‘#form-telefone’).setMask(“(99)9999-99999″).keyup(function() {
    element = jQuery(this);
    phone = element.val().replace(/\D/g, ”);
    if(phone.length == 11) {
    element.setMask(“(99)99999-9999”);
    } else if(phone.length == 10) {
    element.setMask(“(99)9999-999999”);
    }
    });

    Atenciosamente
    Zumpsites.com

  • Olá a todos

    deixo um contribuição em meiomask, para meus propósitos funcionou corretamente.

    $(document).ready(function(){
    $(“.telefone”).setMask(“(99)9999-99999”);
    $(“.telefone”).bind(“focusout”, function(){
    if($(this).val().length > 13){
    $(“.telefone”).setMask(“(99)99999-9999”);
    }else{
    $(“.telefone”).setMask(“(99)9999-99999”);
    }
    });
    });

    [chorme, meiomask 1.1.14 e jquery 1.11.2 ]

    Abraço a todos
    Ricardo
    Zumpsites.com

  • Muito bom o material, ajudou bastante vlw