Formatar o número do telefone no campo input com JavaScript

 

A formatação do campo telefone é muito importante para quem salva o valor recebido no banco de dados ou até mesmo por uma questão visual.

Um campo input tipo tel sem formatação como por exemplo em um formulário pode ficar estranho visualmente e atrapalhar a empresa na organização por chegar bagunçado ou com falta do número de DDD.

Vou mostrar como criar um campo input que consegue receber o numero de telefone fixo e telefone celular formatando com DDD e caráter especial para separação.

Formatando o campo input para telefone fixo e telefone celular

Para criar essa formatação vamos utilizar o “.replace” junto com a “expressão regular”, para receber o valor substituindo e organizando baseado a expressão.

Preparando o HTML com parâmetro JS

Coloque o seguinte código abaixo em seu html

<input type="tel" maxlength="14 required="" data-js="phone">

 

Observe que é um campo tipo TEL que recebe um limite de 14 caracteres com preenchimento obrigatório e o “data-js” que vai fazer a formatação do campo.

Preparando o JavaScript para modificar o input tipo tel

Esse é um código bem curto e por isso vou explicar por partes e adicionar no final do tutorial o código JS completo.

1º O JS vai identificar todos os campos input e percorrer todos com um “FOR” pegando os valores.

document.querySelectorAll('input').forEach(($input) => {  })

2º Armazenar e formatar o valor recebido para pegar somente o que está dentro do “data-js”.

const field = $input.dataset.js

 

3º Enviar o valor formatado para o input atualizado em cada interação.

$input.addEventListener('input', (e) => {

    e.target.value = formato[field](e.target.value)

  }, false)

 

4º Constante que faz a formatação e envia de volta para terceiro passo.

const formato = {

  phone (value) {

    return value

      .replace(/\D/g, '')

      .replace(/(\d{2})(\d)/, '($1)$2')

      .replace(/(\d{4})(\d)/, '$1-$2')

      .replace(/(\d{4})-(\d)(\d{4})/, '$1$2-$3')

      .replace(/(-\d{4})\d+?$/, '$1')

  }

}

 

É somente isso para criar a formatação do número de telefone.

Abaixo está o código completo do JS.

 

const formato = {

  phone (value) {

    return value

      .replace(/\D/g, '')

      .replace(/(\d{2})(\d)/, '($1)$2')

      .replace(/(\d{4})(\d)/, '$1-$2')

      .replace(/(\d{4})-(\d)(\d{4})/, '$1$2-$3')

      .replace(/(-\d{4})\d+?$/, '$1')

  }

}

 

document.querySelectorAll('input').forEach(($input) => {

  const field = $input.dataset.js

  $input.addEventListener('input', (e) => {

    e.target.value = formato[field](e.target.value)

  }, false)

})

 

 

Viu como é simples? Você pode usar essa base para criar outros tipos de formatação como de um CPF ou CEP.

 

Escreve abaixo o que achou ou uma sugestão de conteúdo que gostaria de saber como fazer.