Máscara de telefone para input em Javascript

Vamos adicionar esse código HTML como exemplo:

<input type="tel" maxlength="15" onkeyup="handlePhone(event)" />

Note que o input tem o type="tel", esse type é indicado para telefones e o mais legal é que no mobile esse campo abre o teclado numérico.

E esse código em CSS:

input {
  display: block;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 10px;
}

E a nossa máscara em Javascript:

const handlePhone = (event) => {
  let input = event.target
  input.value = phoneMask(input.value)
}

const phoneMask = (value) => {
  if (!value) return ""
  value = value.replace(/\D/g,'')
  value = value.replace(/(\d{2})(\d)/,"($1) $2")
  value = value.replace(/(\d)(\d{4})$/,"$1-$2")
  return value
}

Usamos regex dentro do .replace() para formatar o telefone e prevenir que o usuário digite algum carácter que não seja númerico.

Resultado: