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

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

Los números de teléfono están estandarizados en un formato conocido como E.164 , 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 desees 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 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.

Puedes 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 puedes 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

Integra el plugin intl-tel-input en tu código

Vamos a hacer las cosas muy simples y vamos a empezar con algunos HTML y JavaScript puros. Crea un nuevo archivo llamado index.html y agrega 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 puedes encontrar la versión más reciente en las etiquetas. También puedes instalar el plugin con un paquete o una descarga y alojar el código de origen tú mismo.

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

A continuación, agrega el formulario que incluirá la entrada del número de teléfono. Dentro de las etiquetas del body del archivo index.html , agrega el siguiente 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 cargas este archivo en un navegador en este momento, verás 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

Inicializa el plugin intl-tel-input

Agrega una etiqueta de script debajo del cuerpo, pero dentro del HTML, y agrega 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 utilizaremos a continuación.

Vuelve a cargar la página y ahora deberías 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

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

Agrega un aviso de notificación 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, agrega una función para gestionar el envío del formulario. Dentro de tu etiqueta <script> y después de la inicialización del plugin, agrega 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.

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

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

Extra: Permite conocer la ubicación del plugin

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

Regístrate para obtener una cuenta gratuita en IPinfo y obtén tu token de acceso. Puedes utilizar una API de dirección IP diferente si tienes otra que prefieras. Agrega la siguiente función en la parte superior de tu 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, actualiza la inicialización de la 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

Extra: Agrega países preferidos

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

Puedes actualizar esta configuración donde inicializas 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",
});

Valida la entrada de número de teléfono

Es posible que notes que este formulario aún no impide que se ingrese un número de teléfono no válido. Puedes 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, deseas normalizar los números de teléfono en el formato E.164, pero si piensas almacenar aquellos números, también deberías 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 no le estás enviando spam a la persona equivocada, tú me entiendes. Por suerte, la API de Twilio Verify facilita la verificación telefónica a través de SMS o llamadas de voz. Consulta este proyecto en nuestro Intercambio de Códigos para aprender cómo implementar códigos de acceso de una sola vez (estás a mitad de camino con la entrada de números de teléfono).

También podría interesarte:

¿Tienes preguntas sobre la entrada y verificación de números de teléfono? Puedes encontrarme en Twitter @kelleyrobinson. Estoy ansiosa por ver lo que eres capaz de crear.