Criando uma máscara de Telefone com Javascript

Uma editora de livros possui em seu site uma página de fale conosco para melhor atender os seus cliente. Nesta página foi criado um formulário com nome, endereço e telefone.

O problema é que o campo de telefone está sem formatação permitindo que o cliente digite quantos números quiser. Com isso o campo pode receber um número como:

E ficaria difícil saber se esse número é um telefone fixo ou celular.Ou seja, fica confuso tanto para o cliente que está colocando o telefone no campo, quanto para o backend que recebe essa informação.

A formatação esperada para telefones celulares por exemplo seria:

Então o que vamos fazer é encontrar uma maneira de solucionar nosso problema e chegar no resultado esperado utilizando JavaScript.

Capturando o valor do input

O trecho do html onde colocamos o número de telefone está da seguinte maneira:

<div>
  <input type="text" placeholder="9999-9999 ou 9999-99999"  />    
</div>

O que queremos agora é capturar o número digitado pelo cliente, logo vamos criar uma variável para nos auxiliar nessa tarefa:

• O textoAtual que é responsável por capturar o número do telefone.

Vamos aproveitar e encapsular nosso código dentro de uma função, pensando em facilitar a legibilidade e futuras manutenções no nosso código.

function mascaraDeTelefone( telefone ){
    const textoAtual = telefone.value;
}

Agora que já temos o value do input, falta encontrar uma maneira de dizer se o número de telefone é fixo ou celular.

Telefone fixo ou celular

Vamos desenvolver uma lógica que vai consistir em, um if else que vai confirmar o tipo de telefone e depois vamos passar esse número para a variável telefone já formatado.

function mascaraDeTelefone(telefone){
    const textoAtual = telefone.value;
    const isCelular = textoAtual.length === 9;
    let textoAjustado;
        if(isCelular) {
         // faz alguma coisa 
        } else {
         // faz alguma coisa
        }
    telefone.value = textoAjustado;
}

Agora o que queremos é uma maneira de formatar esses números no seguinte padrão: XXXXX-XXXX para celular e XXXX-XXXX para telefone fixo.

Tirando o Hífen

Primeiro vamos retirar o hífen do número digitado, utilizando o método replace que vai retornar uma nova string, com um novo padrão que eu determinar (Veja também como manipulara strings e regex em JavaScript).

function tiraHifen(telefone) {
    const textoAtual = telefone.value;
    const textoAjustado = textoAtual.replace(/\-/g, '');

    telefone.value = textoAjustado;
}

Método slice

Como o input que capturamos é uma string,e já removemos o hífen do número, uma solução possível para o nosso problema de formatação é contar quantos caracteres tem essa string e depois cortá-la em dois pedaços - um antes e outro depois do traço. Uma maneira recortar a string é pelo método slice.

O slice nos permite manipular arrays e strings (que são arrays de caracteres), retornando somente aquele trecho que escolhemos.

Como vamos dividir a sequência de números em duas partes, criamos duas variáveis que vão receber essas partes e uma outra que será responsável por formatar os números:

• const parte1, que vai pegar a primeira posição até a posição 5
• const parte2, que vai pegar da posição 5 até a última posição
• textoAjustado, que vai interpolar o resultado das duas variáveis com o traço

let textoAjustado;
    if(isCelular) {
        const parte1 = textoAtual.slice(0,5);
        const parte2 = textoAtual.slice(5,9);
        textoAjustado = `${parte1}-${parte2}`        
    } else {
        const parte1 = textoAtual.slice(0,4);
        const parte2 = textoAtual.slice(4,8);
        textoAjustado = `${parte1}-${parte2}`
    }

    telefone.value = textoAjustado;
}

Com o código pronto temos o seguinte resultado :

Ótimo! Conseguimos fazer a formatação que queríamos. Agora, com lógica pronta precisamos encontrar uma maneira de disparar essa função toda vez que o cliente tiver digitado o telefone no campo.

O evento onblur

O evento blur é acionado quando um elemento perde foco, ou seja logo após o cliente ter digitado o telefone e clicar em outro campo, o evento onblur é disparado chamando nossa função e realizando a formatação do telefone.

Passamos o this como parâmetro da função, para dizer que o parâmetro está dentro do contexto da nossa função.

<div>
   <input type="text" onblur="mascaraDeTelefone(this)" 
          placeholder="9999-9999 ou 9999-99999"/>
</div>

O evento onfocus

Com a função pronta, vamos uni-la ao evento onfocus, que será responsável por disparar nossa função enquanto o campo do input estiver em foco.

 <div>
   <input type="text" onblur="mascaraDeTelefone(this)" 
          placeholder="9999-9999 ou 9999-99999" 
          onfocus="tiraHifen(this)" />    
 </div>

Como vimos as validações são sempre problemas complexos devido as inúmeras possibilidade de interação do usuário.

Para saber mais

Outra possibilidade de fazer nossa formatação seria através das expressões regulares, que nada mais são que combinações de caracteres que utilizamos para selecionar outros caracteres em strings.

No nosso caso poderiamos utilizar a seguinte expressão regular para formatar o número do celular por exemplo:

let textoAjustado;
    if(isCelular) {
        textoAjustado = textoAtual.replace(/(\d{5})(\d{4})/,
                        function( regex, arg1, arg2) {
                        return arg1 + '-' + arg2 ;
                        });
        telefone.value = textoAjustado;
}

Se ficou interessado em como o Javascript funciona e como você pode utilizá-lo melhor, aqui na Alura temos uma formação em Javascript. Nela, você verá como programar em Javascript, utilizar expressões regulares, dentre outras muitas coisas.