Comment créer une saisie de numéro de téléphone international en HTML et JavaScript

Temps de lecture: 4 minutes

February 01, 2021

Rédigé par

Kelley Robinson

Twilion

Révisé par

Liz Moy

Twilion

Diane Phan

Twilion

Comment créer une saisie de numéro de téléphone international en HTML et JavaScript

Les numéros de téléphone sont standardisés dans un format international appelé E.164 qui combine les codes pays et les numéros d'abonnés dans un format comme celui-ci : +14155552671. Ce format est requis par de nombreuses API (y compris Twilio) et vous évite d'avoir à stocker les codes pays et les numéros de téléphone dans deux colonnes distinctes de la base de données.

Toutefois, vous ne voulez sûrement pas que vos utilisateurs aient à saisir un signe + et un code pays lorsqu'ils fournissent leur numéro de téléphone pour :

Enregistrer un nouveau compte
Activer l'A2F par SMS
Demander un rappel au service client
S'inscrire à des notifications marketing

Cet article de blog vous explique comment créer un champ de saisie de numéro de téléphone pour traiter et analyser les numéros de téléphone à l'aide du HTML de base, de JavaScript et du plug-in intl-tel-input. Nous inclurons des recommandations pour la vérification du téléphone et la prévention des fraudes.

Vous trouverez le code fini sur mon GitHub.

Que peut faire le plug-in intl-tel-input ?

Ce projet utilise beaucoup intl-tel-input, un « plug-in JavaScript permettant de saisir et de valider des numéros de téléphone internationaux ». Je vais vous présenter ma configuration habituelle du plug-in, mais celui-ci contient de nombreuses options de configuration supplémentaires que vous pouvez explorer dans la documentation.

Le plug-in fournit une liste déroulante de codes de pays avec des drapeaux représentant les différents pays. Il traite également le numéro de l'abonné ou « format national » afin de normaliser les données entrées par l'utilisateur, qui peuvent inclure des espaces, des parenthèses, des tirets, etc.

Champ de saisie du numéro de téléphone affichant le résultat au format E.164

Intégrez le plug-in intl-tel-input dans votre code

Nous allons simplifier les choses et commencer avec un langage HTML et JavaScript classique. Créez un nouveau fichier nommé index.html et ajoutez le code suivant :

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

Cela permet de récupérer les versions CDN des CSS et JS du plug-in, et d'afficher ainsi la liste déroulante du code pays et de traiter les numéros de téléphone. J'utilise la version v17.0.8, mais vous trouverez la dernière version en consultant les balises. Vous pouvez également installer le plug-in à l'aide d'un bundler ou télécharger et héberger vous-même le code source.

Pour des styles plus esthétiques, créez un nouveau fichier dans le même dossier appelé styles.css et ajoutez le CSS disponible ici.

Ajoutez ensuite le formulaire qui inclura la saisie du numéro de téléphone. À l'intérieur des balises body du fichier index.html, ajoutez le code HTML suivant :

<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 vous chargez ce fichier dans un navigateur à ce stade, le champ du formulaire s'affichera, mais pas encore le formatage. Nous devons encore initialiser le plug-in.

champ de saisie du numéro de téléphone sans formatage spécial

Initialisez le plug-in intl-tel-input

Ajoutez une balise de script sous le corps mais à l'intérieur du HTML, puis ajoutez le code d'initialisation suivant :

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

Le utilsScript est techniquement facultatif, mais il offre de nombreuses fonctionnalités très utiles, telles que les espaces réservés spécifiques aux pays et le formatage E.164 que nous utiliserons ci-dessous.

Rechargez la page. Maintenant, vous devriez voir le sélecteur de pays et un espace réservé.

champ de saisie du numéro de téléphone avec drapeau américain et liste déroulante du code pays, y compris le texte d'espace réservé pour un numéro de téléphone

Traitez la saisie du numéro de téléphone pour obtenir le format international

Ajoutez une bannière d'alerte sous le formulaire. Celle-ci permettra d'afficher les résultats.

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

Ajoutez ensuite une fonction pour gérer l'envoi du formulaire. À l'intérieur de votre balise <script> et après l'initialisation du plug-in, ajoutez les éléments suivants :

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 partie la plus importante ici est phoneInput.getNumber(). Il s'agit du code de plug-in qui convertit le code de pays sélectionné et l'entrée utilisateur au format international.

Rechargez la page, saisissez un numéro de téléphone et vous devriez voir le format international !

saisie du numéro de téléphone avec résultat correct au format E.164

Bonus : rendez le plug-in sensible à la localisation

Le plug-in est défini par défaut sur US, mais vous voudrez peut-être implémenter cette fonction, car vous avez des utilisateurs dans le monde entier. Vous pouvez mettre à jour les paramètres pour qu'ils correspondent par défaut à l'emplacement de l'utilisateur en fonction de son adresse IP.

Créez un compte gratuit sur IPinfo et récupérez votre access token. Vous pouvez utiliser une autre API d'adresse IP si vous en avez une que vous préférez. Ajoutez la fonction suivante en haut de votre balise <script> avant de définir l'objet 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));
}

Mettez ensuite à jour l'initialisation d'intl-tel-input pour inclure deux paramètres : initialCountry: "auto" et 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",
});

Maintenant, si je règle mon VPN sur Autriche, le plug-in mettra à jour le pays par défaut

saisie du numéro de téléphone indiquant le drapeau autrichien

Bonus : ajoutez des pays préférés

L'une de mes autres fonctions préférées est le paramètre « pays préférés », qui vous permet de spécifier les pays qui apparaîtront en haut de la liste. Dans cet exemple, j'ai identifié que la plupart de mes utilisateurs se trouvent aux États-Unis, en Colombie, en Inde et en Allemagne, et j'ai donc donné la priorité à ces options.

saisie du numéro de téléphone indiquant quatre pays préférés en haut d'une liste déroulante

Vous pouvez mettre à jour ce paramètre lors de l'initialisation du plug-in en ajoutant un tableau preferredCountries dans le format de code 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",
});

Validez la saisie du numéro de téléphone

Vous remarquerez peut-être que ce formulaire n'empêche pas encore les numéros de téléphone non valides. Vous pouvez suivre ce post sur la façon de valider la saisie des numéros de téléphone afin d'éviter que des personnes ne soumettent ce type de message :

Saisie de numéro de téléphone non valide

Meilleures pratiques pour la vérification du téléphone

Vous souhaitez certainement normaliser les numéros de téléphone au format E.164. Toutefois, si vous prévoyez de les enregistrer, vous devrez également procéder à une vérification du téléphone. Cette vérification permet de s'assurer que l'utilisateur n'a pas saisi accidentellement un mauvais numéro, qu'il a le contrôle sur le numéro qu'il associe à son compte et que vous n'envoyez pas des spams à la mauvaise personne. Heureusement, l'API Verify de Twilio facilite la vérification du téléphone par SMS ou par appel vocal. Consultez ce projet sur notre Code Exchange pour apprendre à implémenter des codes d'accès à usage unique (vous êtes déjà à mi-chemin de la saisie du numéro de téléphone !).

Vous pourriez aussi être intéressé par :

Des questions sur la saisie et la vérification du numéro de téléphone ? Vous pouvez me trouver sur Twitter @kelleyrobinson. J'ai hâte de voir ce que vous allez construire !