Cómo crear entradas internacionales de números de teléfono en HTML y JavaScript

Tiempo de lectura: 4 minutos

February 01, 2021

Redactado por

Kelley Robinson

Twilion

Revisado por

Liz Moy

Twilion

Diane Phan

Twilion

Los números de teléfono están estandarizados en un formato internacional denominado E.164, el que combina códigos de país y números de suscriptores en un formato similar al siguiente: +14155552671. Muchas API (incluida Twilio) requieren este formato, lo que significa que no es necesario almacenar los códigos de país y los números de teléfono en dos columnas de base de datos separadas.

Sin embargo, probablemente no desee que los usuarios tengan que escribir un signo + y un código de país cuando proporcionan su número de teléfono para:

Registrar una cuenta nueva
Activar SMS 2FA
Solicitar una devolución de llamada al servicio de atención al cliente
Registrarse para recibir notificaciones de marketing

En esta publicación de blog, se explicará cómo crear un campo de entrada de número de teléfono para procesar y analizar los números de teléfono mediante HTML básico, JavaScript y el plugin intl-tel-input. Incluiremos recomendaciones para la verificación telefónica y la prevención de fraudes.

Puede encontrar el código finalizado en mi GitHub.

¿Qué puede hacer el plugin intl-tel-input?

Este proyecto hace un uso intensivo de intl-tel-input, “un plugin JavaScript para ingresar y validar números de teléfono internacionales”. Abordaré mi configuración habitual del plugin, pero tiene muchas opciones de configuración adicionales que puede explorar en la documentación.

El plugin proporciona un menú desplegable de código de países con banderas bonitas que representan diferentes países. También procesa el número de suscriptor o “formato nacional” para normalizar la entrada del usuario que podría incluir espacios, paréntesis, guiones y más.

Campo de entrada del número de teléfono que muestra el resultado en el formato E.164

Integre el plugin intl-tel-input en su código

Vamos a hacer las cosas muy simples y vamos a empezar con algunos HTML y JavaScript puros. Cree un nuevo archivo llamado index.html y agregue el siguiente 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>

Esto extrae las versiones CDN del CSS y JS del plugin, lo que nos ayuda a mostrar el menú desplegable de códigos de países y a procesar los números de teléfono. Estoy utilizando v17.0.8, pero puede encontrar la versión más reciente en las etiquetas. También puede instalar el plugin con un paquete o una descarga y alojar el código de origen usted mismo.

Para obtener estilos más bonitos, cree un nuevo archivo en la misma carpeta llamado styles.css y agregue el CSS que se encuentra aquí.

A continuación, agregue el formulario que incluirá la entrada del número de teléfono. Dentro de las etiquetas del cuerpo del archivo index.html, agregue el siguiente código 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>

Si carga este archivo en un navegador en este momento, verá el campo del formulario, pero aún sin formato, todavía tenemos que inicializar el plugin.

campo de entrada de número de teléfono que no tiene formato especial

Inicialice el plugin intl-tel-input

Agregue una etiqueta de secuencia de comandos debajo del cuerpo, pero dentro del HTML, y agregue el siguiente código de inicialización:

 <!-- ^^  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>

El utilsScript es técnicamente opcional, pero proporciona una gran cantidad de funcionalidad realmente útil, como los marcadores de posición específicos del país y el formato E.164 que usaremos a continuación.

Vuelva a cargar la página y ahora debería ver el selector de país y un marcador de posición.

campo de entrada de número de teléfono con lista desplegable con la bandera de los EE. UU. y el código del país, que incluye texto de marcador de posición para un número de teléfono

Procese la entrada del número de teléfono para obtener el formato internacional

Agregue un aviso de alerta debajo de nuestro formulario. Esto nos ayudará a mostrar nuestros resultados.

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

A continuación, agregue una función para gestionar el envío del formulario. Dentro de su etiqueta <script> y después de la inicialización del plugin, agregue lo siguiente:

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>`;
}

La parte más importante aquí es phoneInput.getNumber(): este es el código de plugin que convierte el código de país y la entrada de usuario seleccionados en formato internacional.

Vuelva a cargar la página, ingrese un número de teléfono y debería ver el formato internacional.

entrada de número de teléfono con resultados exitosos en formato E.164

Bono: Permita conocer la ubicación del plugin

El plugin se establece de forma predeterminada en EE. UU., pero probablemente usted implementa esto porque tiene usuarios en todo el mundo. Puede actualizar la configuración de manera predeterminada a la ubicación del usuario según su dirección IP.

Regístrese para obtener una cuenta gratuita en Información de IP y obtenga su token de acceso. Puede utilizar una API de dirección IP diferente si tiene otra que prefiera. Agregue la siguiente función en la parte superior de su etiqueta <script> antes de definir el 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));
}

A continuación, actualice la inicialización de intl-tel-input para incluir dos parámetros: InitialCountry: “auto” y 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",
});

Ahora, si establezco mi VPN en Austria, el plugin actualizará el país predeterminado

entrada de número de teléfono que muestra la bandera austriaca

Bono: Agregue países de preferencia

Una de mis otras funciones favoritas es la configuración de “países preferidos”, que le permite especificar países para que aparezcan en la parte superior de la lista. En este ejemplo, identifiqué que la mayoría de mis usuarios se encuentran en los Estados Unidos, Colombia, la India y Alemania, y prioricé esas opciones.

entrada de número de teléfono que muestra cuatro países preferidos en la parte superior de una lista desplegable

Puede actualizar esta configuración donde inicializa el plugin mediante la adición de una serie de preferredCountries en formato de código ISO 3166-1 alfa-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",
});

Valide la entrada de número de teléfono

Es posible que note que este formulario aún no impide que se ingrese un número de teléfono no válido. Puede seguir esta publicación sobre cómo validar la entrada del número de teléfono para que no se ingresen cosas como las siguientes:

Prácticas recomendadas para la verificación telefónica

Definitivamente, desea normalizar los números de teléfono en el formato E.164, pero si piensa almacenar aquellos números, también debería realizar una verificación telefónica. La verificación telefónica ayuda a garantizar que el usuario no escribió accidentalmente el número incorrecto, que tiene el control sobre el número que está asociando con su cuenta y que usted no le está enviando spam a la persona equivocada, usted me entiende. Afortunadamente, API de Twilio Verify facilita la verificación telefónica a través de SMS o llamadas de voz. Eche un vistazo a este proyecto en nuestro Intercambio de códigos para aprender cómo implementar códigos de acceso de una sola vez (estará a mitad de camino con la entrada de números de teléfono).

También podría interesarle:

Este artículo fue traducido del original "How to build international phone number input in HTML and JavaScript". Mientras estamos en nuestros procesos de traducción, nos encantaría recibir sus comentarios en help@twilio.com - las contribuciones valiosas pueden generar regalos de Twilio.