Como criar uma entrada de número de telefone internacional em HTML e JavaScript

Tempo de leitura: 4 minutos

February 01, 2021

Escrito por

Kelley Robinson

Twilion

Revisado por

Liz Moy

Twilion

Diane Phan

Twilion

Como criar uma entrada de número de telefone internacional em HTML e JavaScript

Os números de telefone são padronizados em um formato internacional conhecido como E.164, que combina códigos do país e números de assinante em um formato como este: +14155552671. Esse formato é exigido por muitas APIs (incluindo a da Twilio) e significa que você não precisa armazenar códigos de países e números de telefone em duas colunas de banco de dados separadas.

No entanto, você provavelmente não quer que seus usuários tenham que digitar um sinal de mais (+) e o código do país ao informar o número de telefone para:

registrar uma nova conta
ativar a autenticação 2FA para SMS
solicitar um retorno de chamada do atendimento ao cliente
inscrever-se para receber notificações de marketing

Este post mostrará como criar um campo de entrada de número de telefone para processar e analisar números de telefone usando HTML básico, JavaScript e o plugin intl-tel-input. Incluiremos recomendações para verificação por telefone e prevenção de fraudes.

Você pode encontrar o código finalizado no meu GitHub.

O que o plugin intl-tel-input faz?

Este projeto faz uso intenso do intl-tel-input, um "plugin JavaScript para digitação e validação de números de telefone internacionais". Vou falar sobre a configuração que normalmente uso para o plugin. No entanto, ele tem muitas outras opções de configuração que você pode explorar na documentação.

O plugin tem um menu suspenso com códigos de países com bandeiras para representar diferentes países. Ele também processa o número do assinante ou do "formato nacional" para normalizar a entrada do usuário que pode incluir espaços, parênteses, traços e muito mais.

Campo de entrada do número de telefone mostrando o resultado no formato E.164

Incorporar o plugin intl-tel-input ao seu código

Vamos manter as coisas muito simples aqui e começar com o básico do HTML e do JavaScript. Crie um novo arquivo chamado index.html e adicione o seguinte código:

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>International telephone input</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="styles.css" />
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
   />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
 </head>
 <body>
 </body>
</html>

Ele chama as versões CDN do CSS e JS do plugin, o que nos ajuda a exibir a lista suspensa de códigos de países e a processar os números de telefone. Estou usando a v17.0.8, mas você pode encontrar a versão mais recente conferindo as tags. Você também pode instalar o plugin com um bundler ou download e hospedar o código-fonte.

Para estilos mais bonitos, crie um novo arquivo na mesma pasta chamado styles.css e adicione o CSS encontrado aqui.

Em seguida, adicione o formulário que incluirá a entrada do número de telefone. Dentro das tags body do arquivo index.html, adicione o seguinte HTML:

<div class="container">
 <form id="login" onsubmit="process(event)">
   <p>Enter your phone number:</p>
   <input id="phone" type="tel" name="phone" />
   <input type="submit" class="btn" value="Verify" />
 </form>
</div>

Se você carregar este arquivo em um navegador neste momento, verá o campo de formulário, mas nenhuma formatação, pois ainda precisamos inicializar o plugin.

campo de entrada do número de telefone sem formatação especial

Inicializar o plugin intl-tel-input

Adicione uma tag de script abaixo do corpo, mas dentro do HTML, e adicione o seguinte código de inicialização:

 <!-- ^^  form code  ^^ -->
 </body>
 <script>
   const phoneInputField = document.querySelector("#phone");
   const phoneInput = window.intlTelInput(phoneInputField, {
     utilsScript:
       "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
   });
 </script>
</html>

O utilsScript é tecnicamente opcional, mas fornece muitas funcionalidades realmente úteis, como espaços reservados específicos do país e a formatação E.164 que usaremos abaixo.

Recarregue a página para ver o seletor de país e um espaço reservado.

campo de entrada do número de telefone com a bandeira dos EUA e a lista suspensa do código do país, incluindo texto de espaço reservado para um número de telefone

Processar a entrada do número de telefone para obter o formato internacional

Adicione um banner de alerta abaixo do nosso formulário. Isso nos ajudará a exibir os resultados.

 </form>
 <!-- ^^  form code  ^^ -->
 <div class="alert alert-info" style="display: none;"></div>

Em seguida, adicione uma função para lidar com o envio do formulário. Dentro da tag <script> e após a inicialização do plugin, adicione o seguinte:

const info = document.querySelector(".alert-info");

function process(event) {
 event.preventDefault();

 const phoneNumber = phoneInput.getNumber();

 info.style.display = "";
 info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
}

A parte mais importante aqui é phoneInput.getNumber(), que se trata do código de plugin que converte o código do país selecionado e a entrada do usuário no formato internacional.

Recarregue a página, digite um número de telefone e você verá o formato internacional!

entrada do número de telefone no formato E.164

Bônus: torne o plugin sensível à localização

O plugin usa os EUA como padrão, mas você provavelmente está implementando isso porque você tem usuários em todo o mundo. Você pode atualizar as configurações para definir o padrão como o local do usuário, com base no endereço IP.

Inscreva-se para uma conta gratuita na IPinfo e receba seu token de acesso. Você pode usar uma API de endereço IP diferente para isso se tiver alguma de sua preferência. Adicione a seguinte função na parte superior da tag <script> antes de definir o objeto phoneInputField:

function getIp(callback) {
 fetch('https://ipinfo.io/json?token=<your token>', { headers: { 'Accept': 'application/json' }})
   .then((resp) => resp.json())
   .catch(() => {
     return {
       country: 'us',
     };
   })
   .then((resp) => callback(resp.country));
}

Em seguida, atualize a inicialização do intl-tel-input para incluir dois parâmetros: initialCountry: "auto" e geoIpLookup: getIp.

const phoneInput = window.intlTelInput(phoneInputField, {
 initialCountry: "auto",
 geoIpLookup: getIp,
 utilsScript:
   "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});

Agora, se eu definir minha VPN como Áustria, o plugin atualizará o país padrão

entrada de número de telefone mostrando a bandeira austríaca

Bônus: adicionar países preferidos

Um outro recurso que eu gosto é a configuração de "países preferidos", que permite especificar países para serem exibidos no topo da lista. Para este exemplo, eu identifiquei que a maioria de meus usuários estão nos EUA, Colômbia, Índia e Alemanha, e priorizei essas opções.

entrada de número de telefone mostrando quatro países preferenciais na parte superior de uma lista suspensa

Você pode atualizar esta configuração onde você inicializa o plugin adicionando uma matriz de preferredCountries no formato de código ISO 3166-1 alpha-2:

const phoneInput = window.intlTelInput(phoneInputField, {
  preferredCountries: ["us", "co", "in", "de"],
  utilsScript:
    "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});

Validar a entrada do número de telefone

Este formulário ainda não impede nenhum número de telefone inválido. Você pode acompanhar esta publicação sobre como validar a entrada do número de telefone para evitar envios de entradas como esta:

Práticas recomendadas para verificação de telefone

É extremamente recomendável que você normalize os números de telefone no formato E.164. No entanto, se planeja armazenar esses números, também é importante executar uma verificação de telefone. A verificação de telefone ajuda a garantir que o usuário não digitou acidentalmente o número errado, que ele tenha controle sobre o número que está associando à conta dele e que você não está enviando spam para a pessoa errada. O bom é que a API Verify da Twilio facilita a verificação de telefone via SMS ou chamada de voz. Confira este projeto no Code Exchange para saber como implementar senhas de uso único (OTP). Você já está na metade do caminho com a entrada do número de telefone!

Você também pode estar interessado em:

Dúvidas sobre a entrada e a verificação do número de telefone? Você pode entrar em contato comigo no Twitter: @kelleyrobinson. Estamos ansiosos para ver o que você vai criar.