Eai filhotes, tudo bem? Hoje vai uma dica simples para ser usado no dia-dia sobre como criar uma mascara para o telefone.

“Mas não existem trocentas máscaras de telefone por ai, tio André?”

Bom, sim, mas como vocês sabem a pouco tempo São Paulo adotou o nono digito no numero de celular e isso quebrou a perna de muito sistema por ai e praticamente invalidou as nossas mascaras de telefone… porque aparentemente ninguém do governo pensa em nós os programadores quando fazem uma decisão importante!

dilmatelefone2Presidente Dilma, em uma das únicas vezes que consultou um programador.

O Problema

O problema é que se o número for um celular e se ele terá 9 dígitos em vez de 8, e o maldito do novo digito fica antes do “-“, ou seja o 1111 -1111 ficaria 11111-1111. Alem disso todos os outros estados estão com 8 dígitos, mas serão eventualmente atualizados para 9. Então por muito tempo precisaremos de um “esquema” que aceite as duas maneiras.

A Primeira Gambi… Solução

Bom, existe uma forma que achei na internet para fazer isso usando o mask do jquery:

http://jsfiddle.net/dKRGE/111/

$("#phone").mask("(99) 9999?9-9999");

$("#phone").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;

        var first = $(this).val().substr( 0, 9 );

        $(this).val( first + '-' + lastfour );
    }
});

Mas essa solução tem um problema, porque enquanto o usuário esta digitando, o traço sempre estará depois dos 5 digitos, dando a impressão que é obrigatório o nono digito, mesmo que digite apenas oito:

ex1

 

Mas se você simplesmente deixar assim e sair do campo… bom, ele magicamente funciona:

ex2

Apesar de funcionar, eu acreditei que existia uma solução melhor, mas como não achei mais nada na internet, eu resolvi criar uma.

A Solução Campeã (até o momento)

Usando meu conhecimento infinito de javascript (google!)  cheguei a esse código incrivelmente complexo simples:

// Bind no input e propertychange para pegar ctrl-v
// e outras formas de input
$("#phone").bind('input propertychange',function(){
    // pego o valor do telefone
    var texto = $(this).val();
    // Tiro tudo que não é numero
    texto = texto.replace(/[^\d]/g, '');
    // Se tiver alguma coisa
    if (texto.length > 0)
    {
    // Ponho o primeiro parenteses do DDD    
    texto = "(" + texto;

        if (texto.length > 3)
        {
            // Fecha o parenteses do DDD
            texto = [texto.slice(0, 3), ") ", texto.slice(3)].join('');  
        }
        if (texto.length > 12)
        {      
            // Se for 13 digitos ( DDD + 9 digitos) ponhe o traço no quinto digito            
            if (texto.length > 13) 
                texto = [texto.slice(0, 10), "-", texto.slice(10)].join('');
            else
             // Se for 12 digitos ( DDD + 8 digitos) ponhe o traço no quarto digito
                texto = [texto.slice(0, 9), "-", texto.slice(9)].join('');
        }   
            // Não adianta digitar mais digitos!
            if (texto.length > 15)                
               texto = texto.substr(0,15);
    }
    // Retorna o texto
   $(this).val(texto);     
})

Você pode testar esse script aqui: http://jsfiddle.net/msRJW/3/ .

Apesar de ser bem simples o script ele funciona que é uma beleza.

Apesar do script estar funcionando, se você tiver alguma sugestão fique a vontade para falar nos comentários.

Então é isso, agora é torcer para esse cara que inventou esse nono digito la de São Paulo não mexa em outra coisa.

 

luisfabiano

Droga.

[ATUALIZADO]

Bugs Conhecidos

* No IE 9 (possivelmente nos outros também) quando você aperta backspace ele não formata o número sozinho, você tem que inserir outro numero para formatar. Uma maneira de corrigir isso é adicionar o keyup no bind, mas ai o cara não consegue navegar com as setas dentro do campo e isso em todos os browsers.