Máscara jQuery para novo dígito de celular em São Paulo | Pedro Elsner, Profissional de TI


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