avec intlTelInput.js | webdevpro.net

<input type=’tel’> avec intlTelInput.js

28 août 2023

Introduction

Pour les champs <input type= »tel »> dans lesquels les utilisateurs doivent saisir un numéro de téléphone en format international sans avoir à saisir le symbole + et l’indicatif

La librairie intlTelInput ajoute :

un menu déroulant avec un drapeau du pays pour tous les pays du monde
l’indicatif associé au pays sélectionné
et même un placeholder avec l’aspect attendu du téléphone (mobile / fixe) à saisir

champ input type tel librairie js intlTelInput

Elle est facile à personnaliser :

filtrer que certain pays dans le menu déroulant
afficher / masquer des indicatifs
choisir le format du placeholder : téléphone mobile / téléphone fixe

sources et documentation officielle de la librairie intlTelInput

Script html / css / Javascript

<!DOCTYPE html>
<html lang="fr">
 <head>
   <title>Saisie de numéros internationaux</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"/>
   <style>
     .error{
      border:2px solid red;
     }
     .success{
      border:2px solid green;
     }
   </style>
   </head>
 <body>
  <div class="container">
   <form>
     <p>Entrez votre numéro de téléphone:</p>
     <input id="phone" type="tel" name="phone" />
     <input type="button" class="btn" value="verifier" />
     <input type="submit" class="btn" value="submit" />
   </form>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
  <script>
    const form = {
      init : function(){
        document.querySelector("form").addEventListener("submit" , form.submit )
        document.querySelector("input[type='button']").addEventListener("click" , form.validation )
        form.input().addEventListener("focus", form.reset);
        form.input().addEventListener("input", form.reset);
      },
      input : function(){
        return document.querySelector("#phone")
      } ,
      phoneInput : intlTelInput( document.querySelector("#phone") , {
        initialCountry: "fr",
        preferredCountries : ["fr", "es" , "be", "gb", "de"],
        separateDialCode : true,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
      }),
      reset : function(){
         form.input().classList.remove("error")
         form.input().classList.remove("success")
      },
      validation : function(){
        if(!form.phoneInput.isValidNumber()){
          alert("numéro de téléphone invalide")
          form.input().classList.add("error")
          return false
        }
        form.input().classList.add("success")
        return true
      },
      submit : function(e){
        e.preventDefault();
        if(form.validation() === true){
          form.reset();
          const full_number = form.phoneInput.getNumber(intlTelInputUtils.numberFormat.E164);
          console.log(full_number);
        }
      }
    }
    document.addEventListener("DOMContentLoaded" , form.init);
 </script>
 </body>
</html>

Méthodes intéressantes

const input = intlTelInput(DomInput , options)

appliquer la librairie sur l’input : drapeau / indicatif en fonction du drapeau sélectionné

const input = intlTelInput( document.querySelector("#phone") , {
        initialCountry: "fr",
        preferredCountries : ["fr", "es" , "be", "gb", "de"],
        separateDialCode : true,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
      }),

.getNumber()

récupérer le numéro complet saisi par l’utilisateur : le +, l’indicatif et le numéro de téléphone

const full_number = input.phoneInput.getNumber(intlTelInputUtils.numberFormat.E164);

.isValidNumber()

vérifier que le numéro saisi correspond à la norme de numérotation du pays / drapeau sélectionné

input.phoneInput.isValidNumber()

wiki Plan_de_numérotation_en_Espagne

webdevpro.net