intl tel input
v24.7.0
NEWS : nous avons désormais notre propre composant Vue !
NEWS : nous avons désormais notre propre composant React ! Jouez avec sur Storybook.
?️ NEWS : nous proposons désormais des traductions dans plus de 30 langues ! Voyez-les en action.
International Telephone Input est un plugin JavaScript permettant de saisir et de valider des numéros de téléphone internationaux. Il prend un champ de saisie standard, ajoute une liste déroulante de pays consultable, détecte automatiquement le pays de l'utilisateur, affiche un numéro d'espace réservé pertinent, formate le numéro au fur et à mesure que vous tapez et fournit des méthodes de validation complètes. Les composants React et Vue sont également inclus.
Si vous trouvez le plugin utile, pensez à soutenir le projet.
Utilisez l'API de Twilio pour créer une vérification téléphonique, des SMS 2FA, des rappels de rendez-vous, des notifications marketing et bien plus encore. Nous avons hâte de voir ce que vous construisez.
Nous fournissons désormais les composants React et Vue ainsi que le plugin JavaScript standard. Ce fichier Lisez-moi concerne le plugin JavaScript. Consultez le fichier Lisez-moi du composant React ou le fichier Lisez-moi du composant Vue.
Vous pouvez visionner une démo en direct et voir quelques exemples d’utilisation des différentes options. Vous pouvez également l'essayer par vous-même en téléchargeant le projet et en ouvrant demo.html dans un navigateur.
Par défaut, sur les appareils mobiles, nous affichons une fenêtre contextuelle en plein écran au lieu de la liste déroulante en ligne, afin de mieux utiliser l'espace limité de l'écran. Ceci est similaire au fonctionnement d’un élément <select> natif. Vous pouvez contrôler ce comportement avec l'option useFullscreenPopup . La fenêtre contextuelle peut être fermée soit en sélectionnant un pays dans la liste, soit en appuyant sur la zone grise sur les côtés. Voir exemple (en utilisant le composant React).
| Chrome | Firefox | Safari | Bord |
|---|---|---|---|
| ✓ | ✓ | v14+ | ✓ |
Remarque : Nous avons désormais abandonné la prise en charge de toutes les versions d'Internet Explorer, car elles ne sont plus prises en charge par aucune version de Windows.
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css " > < script src =" https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js " > </ script >
< script >
const input = document . querySelector ( "#phone" ) ;
window . intlTelInput ( input , {
loadUtilsOnInit : "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" ,
} ) ;
</ script > Installer avec npm : npm install intl-tel-input --save ou fil : yarn add intl-tel-input
Importez le CSS : import 'intl-tel-input/build/css/intlTelInput.css';
Définissez le chemin vers flags.webp et globe.webp dans votre CSS, en remplaçant les variables CSS
. iti {
--iti-path-flags-1x : url ( 'path/to/flags.webp' );
--iti-path-flags-2x : url ( 'path/to/[email protected]' );
--iti-path-globe-1x : url ( 'path/to/globe.webp' );
--iti-path-globe-2x : url ( 'path/to/[email protected]' );
} import intlTelInput from 'intl-tel-input' ;
const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils" )
} ) ; La plupart des bundles (tels que Webpack, Vite ou Parcel) verront cela et placeront le script des utilitaires dans un bundle séparé et le chargeront de manière asynchrone, uniquement en cas de besoin. Si cela ne fonctionne pas avec votre bundler ou si vous souhaitez charger le module utils à partir d'un autre emplacement (comme un CDN), vous pouvez définir l'option loadUtilsOnInit sur l'URL à partir de laquelle charger sous forme de chaîne. Par exemple:
import intlTelInput from 'intl-tel-input' ;
const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
loadUtilsOnInit : `https://cdn.jsdelivr.net/npm/intl-tel-input@ ${ intlTelInput . version } /build/js/utils.js` ;
} ) ; Téléchargez la dernière version, ou mieux encore, installez-la avec npm
Ajouter la feuille de style
< link rel =" stylesheet " href =" path/to/intlTelInput.css " >. iti {
--iti-path-flags-1x : url ( 'path/to/flags.webp' );
--iti-path-flags-2x : url ( 'path/to/[email protected]' );
--iti-path-globe-1x : url ( 'path/to/globe.webp' );
--iti-path-globe-2x : url ( 'path/to/[email protected]' );
} < script src =" path/to/intlTelInput.js " > </ script >
< script >
const input = document . querySelector ( "#phone" ) ;
window . intlTelInput ( input , {
loadUtilsOnInit : "path/to/utils.js"
} ) ;
</ script > Nous vous recommandons fortement de charger le fichier utils.js inclus, qui permet le formatage et la validation, etc. Ensuite, le plugin est conçu pour toujours traiter les nombres au format international complet (par exemple "+17024181234") et les convertir en conséquence - même lorsque nationalMode ou separateDialCode est activé. Nous vous recommandons d'obtenir, de stocker et de définir des numéros exclusivement dans ce format pour plus de simplicité. Vous n'aurez alors pas à gérer l'indicatif du pays séparément, car les numéros internationaux complets incluent les informations sur l'indicatif du pays.
Vous pouvez toujours obtenir le numéro international complet (y compris le code du pays) en utilisant getNumber , il vous suffit alors de stocker cette chaîne dans votre base de données (vous n'avez pas besoin de stocker le pays séparément), puis la prochaine fois que vous initialiserez le plugin avec ce numéro en entrée, il définira automatiquement le pays et le formatera en fonction des options que vous spécifiez (par exemple, lors de l'utilisation nationalMode il affichera automatiquement le numéro au format national, en supprimant l'indicatif international).
Si vous connaissez le pays de l'utilisateur, vous pouvez le définir avec initialCountry (par exemple "us" pour les États-Unis), et si vous ne le savez pas, nous vous recommandons de définir initialCountry sur "auto" (avec l'option geoIpLookup ) pour déterminer le pays de l'utilisateur. pays en fonction de leur adresse IP - voir exemple.
Si vous connaissez la langue de l'utilisateur, vous pouvez utiliser les traductions incluses pour localiser les noms de pays (etc) - voir exemple.
Lorsque vous initialisez le plugin, le premier argument est l'élément d'entrée et le second est un objet contenant toutes les options d'initialisation souhaitées, qui sont détaillées ci-dessous. Remarque : toutes les options qui acceptent des codes de pays doivent être des codes ISO 3166-1 alpha-2.
autoriserDropdown
Type : Boolean par défaut : true
S'il faut ou non autoriser la liste déroulante. S'il est désactivé, il n'y a pas de flèche déroulante et le pays sélectionné n'est pas cliquable. De plus, si showFlags est activé, nous affichons le drapeau sélectionné à droite car il ne s'agit que d'un marqueur d'état. Notez que si separateDialCode est activé, allowDropdown est forcé à true car la liste déroulante est requise lorsque l'utilisateur tape "+" dans ce cas. Jouez avec cette option sur Storybook (en utilisant le composant React).
espace réservé automatique
Type : String Valeur par défaut : "polite"
Définissez l'espace réservé de l'entrée sur un exemple de numéro pour le pays sélectionné et mettez-le à jour si le pays change. Vous pouvez spécifier le type de numéro à l’aide de l’option placeholderNumberType . Par défaut, il est défini sur "polite" , ce qui signifie qu'il ne définira l'espace réservé que si l'entrée n'en a pas déjà un. Vous pouvez également le définir sur "aggressive" , qui remplacera tout espace réservé existant, ou sur "off" . Nécessite le chargement du script utils.
conteneurClass
Type : String Valeur par défaut : ""
Classes supplémentaires à ajouter au wrapper (injecté) <div> .
paysCommander
Type : Array par défaut : null
Spécifiez l'ordre de la liste des pays avec un tableau de codes de pays iso2. Tous les pays omis apparaîtront après ceux spécifiés, par exemple en définissant countryOrder sur ["jp", "kr"] entraînera la liste : Japon, Corée du Sud, Afghanistan, Albanie, Algérie, etc...
paysRecherche
Type : Boolean par défaut : true
Ajoutez une entrée de recherche en haut de la liste déroulante afin que les utilisateurs puissent filtrer les pays affichés.
personnaliséPlaceholder
Type : Function Par défaut : null
Modifiez l'espace réservé généré par autoPlaceholder. Doit renvoyer une chaîne.
intlTelInput ( input , {
customPlaceholder : function ( selectedCountryPlaceholder , selectedCountryData ) {
return "e.g. " + selectedCountryPlaceholder ;
} ,
} ) ; dropdownConteneur
Type : Node par défaut : null
Attend un nœud, par exemple document.body . Au lieu de placer le balisage déroulant du pays à côté de l'entrée, ajoutez-le au nœud spécifié, et il sera ensuite positionné à côté de l'entrée à l'aide de JavaScript (en utilisant position: fixed ). Ceci est utile lorsque l'entrée se trouve à l'intérieur d'un conteneur avec overflow: hidden . Notez que le positionnement est interrompu par le défilement, donc la liste déroulante se fermera automatiquement lors de l'événement de défilement window .
exclurePays
Type : Array Par défaut : []
Dans la liste déroulante, affichez tous les pays sauf ceux que vous spécifiez ici. Jouez avec cette option sur Storybook (en utilisant le composant React).
fixDropdownWidth
Type : Boolean par défaut : true
Fixez la largeur de la liste déroulante à la largeur de saisie (plutôt que d'être aussi large que le nom de pays le plus long). Jouez avec cette option sur Storybook (en utilisant le composant React).
formatAsYouType
Type : Boolean par défaut : true
Formatez automatiquement le numéro au fur et à mesure que l'utilisateur le tape. Cette fonctionnalité sera désactivée si l'utilisateur saisit ses propres caractères de formatage. Nécessite le chargement du script utils.
formatSurAffichage
Type : Boolean par défaut : true
Formatez la valeur d'entrée (selon l'option nationalMode ) lors de l'initialisation, et sur setNumber . Nécessite le chargement du script utils.
rechercheGeoIp
Type : Function Par défaut : null
Lorsque vous définissez initialCountry sur "auto" , vous devez utiliser cette option pour spécifier une fonction personnalisée qui appelle un service de recherche IP pour obtenir l'emplacement de l'utilisateur, puis appelle le rappel success avec le code du pays concerné. Notez également que lors de l'instanciation du plugin, un objet Promise est renvoyé sous la propriété d'instance promise , vous pouvez donc faire quelque chose comme iti.promise.then(...) pour savoir quand des demandes d'initialisation comme celle-ci sont terminées.
Voici un exemple utilisant le service ipapi :
intlTelInput ( input , {
initialCountry : "auto" ,
geoIpLookup : function ( success , failure ) {
fetch ( "https://ipapi.co/json" )
. then ( function ( res ) { return res . json ( ) ; } )
. then ( function ( data ) { success ( data . country_code ) ; } )
. catch ( function ( ) { failure ( ) ; } ) ;
}
} ) ; Notez que le rappel failure doit être appelé en cas d'erreur, d'où l'utilisation de catch() dans cet exemple. Astuce : stockez le résultat dans un cookie pour éviter les recherches répétées !
entrée masquée
Type : Function Par défaut : null
Permet la création de champs de saisie masqués dans un formulaire pour stocker le numéro de téléphone international complet et l'indicatif du pays sélectionné. Il accepte une fonction qui reçoit en argument le nom de l'entrée téléphonique principale. Cette fonction doit renvoyer un objet avec les propriétés phone et (éventuellement) country pour spécifier respectivement les noms des entrées masquées pour le numéro de téléphone et l'indicatif du pays. Ceci est utile pour les soumissions de formulaires non-Ajax afin de garantir que le numéro international complet et le code du pays sont capturés, en particulier lorsque nationalMode est activé.
* Remarque : Cette fonctionnalité nécessite que l'entrée soit à l'intérieur d'un élément <form> , car elle écoute l'événement submit sur l'élément de formulaire le plus proche. Notez également que puisque cela utilise getNumber en interne, d'une part, il nécessite que le script utils soit chargé, et d'autre part, il attend un numéro valide et ne fonctionnera donc correctement que si vous avez utilisé isValidNumber pour valider le numéro avant d'autoriser la soumission du formulaire.
intlTelInput ( input , {
hiddenInput : function ( telInputName ) {
return {
phone : "phone_full" ,
country : "country_code"
} ;
}
} ) ;Cela générera les éléments (cachés) suivants, qui seront automatiquement renseignés lors de la soumission :
< input type =" hidden " name =" phone_full " >
< input type =" hidden " name =" country_code " > i18n
Type : Object Par défaut : {}
Autoriser la localisation/personnalisation de plus de 200 noms de pays, ainsi que d'autres textes de l'interface utilisateur (par exemple, le texte d'espace réservé pour la saisie de la recherche de pays). Le moyen le plus simple de procéder consiste simplement à importer l'un des modules de traduction fournis et à définir i18n sur cette valeur (voir l'option 1 ci-dessous). Vous pouvez également remplacer une ou plusieurs clés individuelles de cette manière (voir l'option 1 ci-dessous). Vous pouvez également fournir vos propres traductions personnalisées (voir l'option 2 ci-dessous). Si vous fournissez le vôtre, vous devrez spécifier tous les noms de pays (qui peuvent être copiés du projet country-list, par exemple voici les noms de pays en français), ainsi que quelques chaînes d'interface utilisateur (répertoriées ci-dessous). Voir exemple.
Si nous ne prenons pas actuellement en charge une langue dont vous avez besoin, il est facile d'y contribuer vous-même : il vous suffit de fournir une poignée de chaînes de traduction de l'interface utilisateur, car nous récupérons automatiquement les noms de pays du projet de liste de pays.
Option 1 : importer l'un des modules de traduction fournis
import { fr } from "intl-tel-input/i18n" ;
intlTelInput ( input , {
i18n : fr ,
} ) ;
// or to override one or more keys, you could do something like this
intlTelInput ( input , {
i18n : {
... fr ,
searchPlaceholder : "Recherche de pays" ,
} ,
} ) ;Option 2 : définissez vos propres traductions personnalisées
intlTelInput ( input , {
i18n : {
// Country names - see the full list in src/js/intl-tel-input/i18n/en/countries.ts
af : "Afghanistan" ,
al : "Albania" ,
dz : "Algeria" ,
as : "American Samoa" ,
ad : "Andorra" ,
...
// Aria label for the selected country element
selectedCountryAriaLabel : "Selected country" ,
// Screen reader text for when no country is selected
noCountrySelected : "No country selected" ,
// Aria label for the country list element
countryListAriaLabel : "List of countries" ,
// Placeholder for the search input in the dropdown
searchPlaceholder : "Search" ,
// Screen reader text for when the search produces no results
zeroSearchResults : "No results found" ,
// Screen reader text for when the search produces 1 result
oneSearchResult : "1 result found" ,
// Screen reader text for when the search produces multiple results
multipleSearchResults : "${count} results found" ,
}
} ) ; pays initial
Type : String Valeur par défaut : ""
Définissez la sélection initiale du pays en spécifiant son code pays, par exemple "us" pour les États-Unis. (Veuillez ne pas le faire à moins d'être sûr du pays de l'utilisateur, car cela peut entraîner des problèmes délicats s'il est mal défini et l'utilisateur remplit automatiquement son numéro national et soumet le formulaire sans vérifier - dans certains cas, cela peut passer la validation. et vous pouvez finir par stocker un numéro avec un mauvais code de composition). Vous pouvez également définir initialCountry sur "auto" , qui recherchera le pays de l'utilisateur en fonction de son adresse IP (nécessite l'option geoIpLookup - voir exemple). Notez que quelle que soit la manière dont vous utilisez initialCountry , la sélection du pays ne sera pas mise à jour si l'entrée contient déjà un numéro avec un indicatif international.
loadUtilsOnInit (voir discussion sur la v25)
Type : String ou () => Promise<module> Par défaut : "" Exemple : "/build/js/utils.js"
C'est une façon de charger (paresseux) le fichier utils.js inclus (pour activer le formatage/validation, etc.) - voir Chargement du script utilitaires pour plus d'options. Vous devrez héberger le fichier utils.js, puis définir l'option loadUtilsOnInit sur cette URL, ou bien simplement le pointer vers une version hébergée par CDN, par exemple "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" . Le script est chargé via une instruction d'importation dynamique, ce qui signifie que l'URL ne peut pas être relative – elle doit être absolue.
Alternativement, cela peut être une fonction qui renvoie une promesse pour le module utils. Lorsque vous utilisez un bundler comme Webpack, cela peut être utilisé pour indiquer au bundler que le script utils doit être conservé dans un fichier séparé du reste de votre code. Par exemple : { loadUtilsOnInit: () => import("intl-tel-input/utils") } .
Le script n'est récupéré que lorsque vous initialisez le plugin, et en outre, uniquement lorsque le chargement de la page est terminé (lors de l'événement de chargement de la fenêtre) pour éviter le blocage (le script fait ~ 260 Ko). Lors de l'instanciation du plugin, un objet Promise est renvoyé sous la propriété d'instance promise , vous pouvez donc faire quelque chose comme iti.promise.then(callback) pour savoir quand les demandes d'initialisation comme celle-ci sont terminées. Voir Script utilitaires pour plus d'informations.
Mode national
Type : Boolean par défaut : true
Formatez les nombres au format national plutôt qu’au format international. Cela s'applique aux numéros réservés et à l'affichage des numéros existants des utilisateurs. Notez que les utilisateurs peuvent saisir leurs numéros au format national - tant qu'ils ont sélectionné le bon pays, vous pouvez utiliser getNumber pour extraire un numéro international complet - voir exemple. Il est recommandé de laisser cette option activée, pour encourager les utilisateurs à saisir leurs numéros au format national, car cela leur est généralement plus familier et crée ainsi une meilleure expérience utilisateur.
uniquementPays
Type : Array Par défaut : []
Dans la liste déroulante, affichez uniquement les pays que vous spécifiez - voir exemple.
placeholderNumberType
Type : String Valeur par défaut : "MOBILE"
Spécifiez l'une des clés de l'énumération intlTelInput.utils.numberType (par exemple "FIXED_LINE" ) pour définir le type de numéro à utiliser pour l'espace réservé. Jouez avec cette option sur Storybook (en utilisant le composant React).
Afficher les drapeaux
Type : Boolean par défaut : true
Réglez ceci sur false pour masquer les drapeaux, par exemple pour des raisons politiques. Au lieu de cela, il affichera une icône de globe générique. Jouez avec cette option sur Storybook (en utilisant le composant React).
Code de numérotation séparé
Type : Boolean par défaut : false
Affichez l'indicatif international du pays sélectionné à côté de l'entrée, afin qu'il semble faire partie du numéro saisi. Étant donné que l'utilisateur ne peut pas modifier le code de numérotation affiché, il peut essayer d'en saisir un nouveau. Dans ce cas, pour éviter d'avoir deux codes de numérotation l'un à côté de l'autre, nous ouvrons automatiquement la liste déroulante des pays et mettons le nouveau code de numérotation dans la zone de recherche. plutôt. Ainsi, s'ils tapent +54, l'Argentine sera mise en surbrillance dans la liste déroulante et ils pourront simplement appuyer sur Entrée pour la sélectionner, mettant ainsi à jour le code de numérotation affiché (cette fonctionnalité nécessite que allowDropdown et countrySearch soient activés). Jouez avec cette option sur Storybook (en utilisant le composant React).
Mode strict
Type : Boolean par défaut : false
Lorsque l'utilisateur saisit l'entrée, ignorez tous les caractères non pertinents. L'utilisateur ne peut saisir que des caractères numériques et un plus facultatif au début. Limitez la longueur à la longueur maximale du nombre valide (cela respecte validationNumberType ). Nécessite le chargement du script utils. Voir exemple.
utiliserFullscreenPopup
Type : Boolean Valeur par défaut : true on mobile devices, false otherwise
Contrôlez le moment où la liste des pays apparaît sous forme de fenêtre contextuelle en plein écran ou de liste déroulante en ligne. Par défaut, il apparaîtra sous la forme d'une fenêtre contextuelle en plein écran sur les appareils mobiles (en fonction de l'agent utilisateur et de la largeur de l'écran), pour mieux utiliser l'espace limité (de la même manière que fonctionne un <select> natif) et sous la forme d'une liste déroulante en ligne sur appareils/écrans plus grands. Jouez avec cette option sur Storybook (en utilisant le composant React).
utilsScript
Type : String ou () => Promise<module> Par défaut : "" Exemple : "/build/js/utils.js"
Cette option est obsolète et a été renommée en loadUtilsOnInit . Veuillez consulter les détails de cette option et utilisez-la à la place.
validationNumberType
Type : String Valeur par défaut : "MOBILE"
Spécifiez l'une des clés de l'énumération intlTelInput.utils.numberType (par exemple "FIXED_LINE" ) pour définir le type de numéro à appliquer lors de la validation avec isValidNumber , ainsi que la longueur du numéro à appliquer avec strictMode . Définissez-le sur null pour n'appliquer aucun type particulier.
Dans ces exemples, iti fait référence à l'instance du plugin qui est renvoyée lorsque vous initialisez le plugin, par exemple
const iti = intlTelInput ( input ) ; détruire
Supprimez le plugin de l'entrée et dissociez tous les écouteurs d'événements.
iti . destroy ( ) ; obtenirExtension
Obtenez l'extension du numéro actuel. Nécessite le chargement du script utils.
const extension = iti . getExtension ( ) ; Renvoie une chaîne, par exemple si la valeur d'entrée était "(702) 555-5555 ext. 1234" , cela renverrait "1234"
obtenirNuméro
Obtenez le numéro actuel dans le format donné (par défaut, la norme E.164). Les différents formats sont disponibles dans l'énumération intlTelInput.utils.numberFormat - que vous pouvez voir ici. Nécessite le chargement du script utils. Notez que même si nationalMode est activé, cela peut toujours renvoyer un numéro international complet. Notez également que cette méthode attend un numéro valide et ne doit donc être utilisée qu'après validation.
const number = iti . getNumber ( ) ;
// or
const number = iti . getNumber ( intlTelInput . utils . numberFormat . E164 ) ; Renvoie une chaîne, par exemple "+17024181234"
getNumberType
Obtenez le type (fixe/mobile/numéro gratuit, etc.) du numéro actuel. Nécessite le chargement du script utils.
const numberType = iti . getNumberType ( ) ; Renvoie un entier, que vous pouvez comparer aux différentes options de l'énumération intlTelInput.utils.numberType , par exemple
if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
// is a mobile number
} Notez qu'aux États-Unis, il n'y a aucun moyen de faire la différence entre les numéros de ligne fixe et mobile, donc à la place, il renverra FIXED_LINE_OR_MOBILE .
getSelectedCountryData
Obtenez les données du pays pour le pays actuellement sélectionné.
const countryData = iti . getSelectedCountryData ( ) ;Renvoie quelque chose comme ceci :
{
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} getValidationError
Obtenez plus d’informations sur une erreur de validation. Nécessite le chargement du script utils.
const error = iti . getValidationError ( ) ; Renvoie un entier, que vous pouvez comparer aux différentes options de l'énumération intlTelInput.utils.validationError , par exemple
if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
// the number is too short
} estNuméroValide
Vérifiez si le numéro actuel est valide en fonction de sa longueur - voir l'exemple, ce qui devrait suffire pour la plupart des cas d'utilisation. Voir isValidNumberPrecise pour une validation plus précise, mais l'avantage de isValidNumber est qu'il est beaucoup plus évolutif car si les pays du monde entier mettent régulièrement à jour leurs règles numériques, ils modifient très rarement la longueur de leurs numéros. Si cette méthode renvoie false , vous pouvez utiliser getValidationError pour obtenir plus d'informations. Respecte l'option validationNumberType (qui est définie sur "MOBILE" par défaut). Nécessite le chargement du script utils.
const isValid = iti . isValidNumber ( ) ; Renvoie : true / false
isValidNumberPrecise
Vérifiez si le numéro actuel est valide en utilisant des règles de correspondance précises pour chaque indicatif de pays/région, etc. - voir exemple. Notez que ces règles changent chaque mois pour différents pays du monde, vous devez donc faire attention à garder le plugin à jour, sinon vous commencerez à rejeter les numéros valides. Pour une forme de validation plus simple et plus évolutive, voir isValidNumber ci-dessus. Si la validation échoue, vous pouvez utiliser getValidationError pour obtenir plus d'informations. Nécessite le chargement du script utils.
const isValid = iti . isValidNumberPrecise ( ) ; Renvoie : true / false
définirPays
Changez le pays sélectionné. Il devrait être rare, voire jamais, que vous ayez besoin de le faire, car le pays sélectionné est automatiquement mis à jour lorsque vous appelez setNumber et transmettez un numéro comprenant un indicatif international, ce qui est l'utilisation recommandée. Notez que vous pouvez omettre l'argument du code de pays pour définir le pays sur l'état vide (globe) par défaut.
iti . setCountry ( "gb" ) ; setNumber
Insérez un numéro et mettez à jour le pays sélectionné en conséquence. Notez que si formatOnDisplay est activé, cela tentera de formater le numéro au format national ou international selon l'option nationalMode .
iti . setNumber ( "+447733123456" ) ; setPlaceholderNumberType
Modifiez l’option placeholderNumberType.
iti . setPlaceholderNumberType ( "FIXED_LINE" ) ; définirDésactivé
Met à jour l'attribut désactivé de l'entrée téléphonique et du bouton de pays sélectionné. Accepte une valeur booléenne. Remarque : nous vous recommandons de l'utiliser au lieu de mettre à jour directement l'attribut désactivé de l'entrée.
iti . setDisabled ( true ) ; getCountryData
Récupérez les données de pays du plugin - soit pour les réutiliser ailleurs, par exemple pour générer votre propre liste déroulante de pays - voir exemple, soit vous pouvez également les utiliser pour modifier les données de pays. Notez que toute modification doit être effectuée avant d’initialiser le plugin.
const countryData = intlTelInput . getCountryData ( ) ;Renvoie un tableau d'objets country :
[ {
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} , ... ] obtenirInstance
Après avoir initialisé le plugin, vous pouvez toujours accéder à nouveau à l'instance en utilisant cette méthode, en transmettant simplement l'élément d'entrée approprié.
const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc loadUtils (voir discussion sur la v25)
Alternative à l'option loadUtilsOnInit , cette méthode vous permet de charger manuellement le script utils.js à la demande, pour activer le formatage/validation, etc. Voir Chargement du script Utilities pour plus d'informations. Cette méthode ne doit être appelée qu'une fois par page. Un objet Promise est renvoyé afin que vous puissiez utiliser loadUtils().then(callback) pour savoir quand il est terminé.
// Load from a URL:
intlTelInput . loadUtils ( "/build/js/utils.js" ) ;
// Or manage load via some other method with a function:
intlTelInput . loadUtils ( async ( ) => {
// Your own loading logic here. Return a JavaScript "module" object with
// the utils as the default export.
return { default : { /* a copy of the utils module */ } }
} ) ; Vous pouvez écouter les événements suivants déclenchés sur l'élément d'entrée.
changement de pays
Ceci est déclenché lorsque le pays sélectionné est mis à jour, par exemple si l'utilisateur sélectionne un pays dans la liste déroulante, ou s'il saisit un code de numérotation différent dans l'entrée, ou si vous appelez setCountry etc.
input . addEventListener ( "countrychange" , function ( ) {
// do something with iti.getSelectedCountryData()
} ) ;Voir un exemple ici : Synchronisation des pays
ouvrir : liste déroulante des pays
Ceci est déclenché lorsque l'utilisateur ouvre la liste déroulante.
fermer : liste déroulante des pays
Ceci est déclenché lorsque l'utilisateur ferme la liste déroulante.
Il existe de nombreuses variables CSS disponibles pour la création de thèmes. Voir intlTelInput.scss pour la liste complète.
Quant à l'état vide (icône globe), la version par défaut est gris foncé, et nous proposons également une version "claire", qui devrait mieux fonctionner avec un thème sombre. Alternativement, il est facile de régénérer l'icône du globe dans la couleur dont vous avez besoin pour votre thème. Nous vous recommandons de le télécharger dans la résolution la plus élevée possible, puis de réduire l'image aux tailles requises (20 px de large pour la version par défaut et 40 px de large pour la version @2x).
Exemple de mode sombre (avec capture d'écran ci-dessous) :
@media ( prefers-color-scheme : dark) {
. iti {
--iti-border-color : # 5b5b5b ;
--iti-dialcode-color : # 999999 ;
--iti-dropdown-bg : # 0d1117 ;
--iti-arrow-color : # aaaaaa ;
--iti-hover-color : # 30363d ;
--iti-path-globe-1x : url ( "path/to/globe_light.webp" );
--iti-path-globe-2x : url ( "path/to/[email protected]" );
}
}
