intl tel input
v24.7.0
NEWS: Wir haben jetzt unsere eigene Vue-Komponente!
NEWS: Wir haben jetzt unsere eigene React-Komponente! Spielen Sie damit auf Storybook.
?️ NEUIGKEITEN: Wir bieten jetzt Übersetzungen in über 30 Sprachen an! Sehen Sie sie in Aktion.
International Telephone Input ist ein JavaScript-Plugin zur Eingabe und Validierung internationaler Telefonnummern. Es benötigt ein normales Eingabefeld, fügt ein durchsuchbares Länder-Dropdown-Menü hinzu, erkennt automatisch das Land des Benutzers, zeigt eine relevante Platzhalternummer an, formatiert die Nummer während der Eingabe und bietet umfassende Validierungsmethoden. React- und Vue-Komponenten sind ebenfalls enthalten.
Wenn Sie das Plugin hilfreich finden, denken Sie bitte darüber nach, das Projekt zu unterstützen.
Verwenden Sie die API von Twilio, um Telefonverifizierung, SMS 2FA, Terminerinnerungen, Marketingbenachrichtigungen und vieles mehr zu erstellen. Wir können es kaum erwarten zu sehen, was Sie bauen.
Wir bieten jetzt neben dem regulären JavaScript-Plugin sowohl React- als auch Vue-Komponenten an. Diese Readme-Datei ist für das JavaScript-Plugin. Sehen Sie sich die Readme-Datei zur React-Komponente oder die Readme-Datei zur Vue-Komponente an.
Sie können sich eine Live-Demo ansehen und einige Beispiele für die Verwendung der verschiedenen Optionen sehen. Alternativ können Sie es selbst ausprobieren, indem Sie das Projekt herunterladen und demo.html in einem Browser öffnen.
Standardmäßig zeigen wir auf Mobilgeräten ein Vollbild-Popup anstelle des Inline-Dropdowns an, um den begrenzten Platz auf dem Bildschirm besser zu nutzen. Dies ähnelt der Funktionsweise eines nativen <select> -Elements. Sie können dieses Verhalten mit der Option useFullscreenPopup steuern. Das Popup kann geschlossen werden, indem Sie entweder ein Land aus der Liste auswählen oder auf den grauen Bereich an den Seiten tippen. Siehe Beispiel (mit der React-Komponente).
| Chrom | Firefox | Safari | Rand |
|---|---|---|---|
| ✓ | ✓ | v14+ | ✓ |
Hinweis: Wir haben die Unterstützung für alle Versionen von Internet Explorer eingestellt, da dieser von keiner Windows-Version mehr unterstützt wird.
< 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 > Installieren Sie mit npm: npm install intl-tel-input --save oder Yarn: yarn add intl-tel-input
Importieren Sie das CSS: import 'intl-tel-input/build/css/intlTelInput.css';
Legen Sie den Pfad zu flags.webp und Globe.webp in Ihrem CSS fest, indem Sie die CSS-Variablen überschreiben
. 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" )
} ) ; Die meisten Bundler (wie Webpack, Vite oder Parcel) erkennen dies, platzieren das Dienstprogramm-Skript in einem separaten Bundle und laden es nur bei Bedarf asynchron. Wenn dies mit Ihrem Bundler nicht funktioniert oder Sie das Utils-Modul von einem anderen Ort (z. B. einem CDN) laden möchten, können Sie die Option loadUtilsOnInit auf die URL festlegen, von der geladen werden soll, als Zeichenfolge. Zum Beispiel:
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` ;
} ) ; Laden Sie die neueste Version herunter oder installieren Sie sie besser mit npm
Fügen Sie das Stylesheet hinzu
< 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 > Wir empfehlen Ihnen dringend, die mitgelieferte utils.js zu laden, die Formatierung und Validierung usw. ermöglicht. Dann ist das Plugin so aufgebaut, dass es immer mit Nummern im vollständigen internationalen Format (z. B. „+17024181234“) umgeht und diese entsprechend konvertiert – auch wenn nationalMode oder separateDialCode ist aktiviert. Der Einfachheit halber empfehlen wir Ihnen, Nummern ausschließlich in diesem Format zu erhalten, zu speichern und festzulegen. Dann müssen Sie sich nicht um die separate Verwaltung der Landesvorwahl kümmern, da vollständige internationale Nummern die Informationen zur Landesvorwahl enthalten.
Mit getNumber können Sie jederzeit die vollständige internationale Nummer (einschließlich Ländervorwahl) abrufen. Dann müssen Sie nur diese eine Zeichenfolge in Ihrer Datenbank speichern (Sie müssen das Land nicht separat speichern) und dann das Plugin das nächste Mal initialisieren Mit dieser Nummer in der Eingabe wird automatisch das Land eingestellt und entsprechend den von Ihnen angegebenen Optionen formatiert (z. B. wird bei Verwendung nationalMode die Nummer automatisch im nationalen Format angezeigt und die internationale Vorwahl entfernt).
Wenn Sie das Land des Benutzers kennen, können Sie es mit initialCountry festlegen (z. B. "us" für die Vereinigten Staaten). Wenn nicht, empfehlen wir, initialCountry auf "auto" (zusammen mit der Option geoIpLookup ) zu setzen, um das Land des Benutzers zu ermitteln Land basierend auf ihrer IP-Adresse - siehe Beispiel.
Wenn Sie die Sprache des Benutzers kennen, können Sie die enthaltenen Übersetzungen verwenden, um die Ländernamen (usw.) zu lokalisieren – siehe Beispiel.
Wenn Sie das Plugin initialisieren, ist das erste Argument das Eingabeelement und das zweite ein Objekt, das alle gewünschten Initialisierungsoptionen enthält, die unten detailliert beschrieben werden. Hinweis: Alle Optionen, die Ländercodes akzeptieren, sollten ISO 3166-1 Alpha-2-Codes sein.
AllowDropdown
Typ: Boolean Standard: true
Ob das Dropdown-Menü zugelassen werden soll oder nicht. Wenn die Option deaktiviert ist, gibt es keinen Dropdown-Pfeil und das ausgewählte Land kann nicht angeklickt werden. Wenn showFlags aktiviert ist, zeigen wir stattdessen das ausgewählte Flag rechts an, da es nur eine Statusmarkierung ist. Beachten Sie, dass bei aktiviertem separateDialCode allowDropdown auf true gesetzt wird, da das Dropdown-Menü erforderlich ist, wenn der Benutzer in diesem Fall „+“ eingibt. Spielen Sie mit dieser Option im Storybook (mithilfe der React-Komponente).
autoPlaceholder
Typ: String Standard: "polite"
Legen Sie den Platzhalter der Eingabe auf eine Beispielnummer für das ausgewählte Land fest und aktualisieren Sie ihn, wenn sich das Land ändert. Sie können den Nummerntyp mit der Option placeholderNumberType angeben. Standardmäßig ist es auf "polite" eingestellt, was bedeutet, dass der Platzhalter nur dann gesetzt wird, wenn die Eingabe noch keinen hat. Sie können es auch auf "aggressive" setzen, wodurch alle vorhandenen Platzhalter ersetzt werden, oder auf "off" . Erfordert das Laden des Utils-Skripts.
ContainerKlasse
Typ: String Standard: ""
Zusätzliche Klassen zum Hinzufügen zum (injizierten) Wrapper <div> .
CountryOrder
Typ: Array Standard: null
Geben Sie die Reihenfolge für die Länderliste mit einem Array von ISO2-Ländercodes an. Alle ausgelassenen Länder werden nach den angegebenen angezeigt, z. B. wenn Sie countryOrder auf ["jp", "kr"] setzen, wird folgende Liste angezeigt: Japan, Südkorea, Afghanistan, Albanien, Algerien usw.
Ländersuche
Typ: Boolean Standard: true
Fügen Sie oben im Dropdown-Menü eine Sucheingabe hinzu, damit Benutzer die angezeigten Länder filtern können.
benutzerdefinierter Platzhalter
Typ: Function Standard: null
Ändern Sie den von autoPlaceholder generierten Platzhalter. Muss eine Zeichenfolge zurückgeben.
intlTelInput ( input , {
customPlaceholder : function ( selectedCountryPlaceholder , selectedCountryData ) {
return "e.g. " + selectedCountryPlaceholder ;
} ,
} ) ; dropdownContainer
Typ: Node Standard: null
Erwartet einen Knoten, z. B. document.body . Anstatt das Land-Dropdown-Markup neben der Eingabe zu platzieren, hängen Sie es an den angegebenen Knoten an, und es wird dann mit JavaScript neben der Eingabe positioniert (unter Verwendung von position: fixed ). Dies ist nützlich, wenn sich die Eingabe in einem Container mit overflow: hidden befindet. Beachten Sie, dass die Positionierung durch Scrollen unterbrochen wird, sodass das Dropdown-Menü beim window Scroll-Ereignis automatisch geschlossen wird.
ausschließenLänder
Typ: Array Standard: []
Zeigen Sie im Dropdown-Menü alle Länder außer den hier angegebenen an. Spielen Sie mit dieser Option im Storybook (mithilfe der React-Komponente).
fixDropdownWidth
Typ: Boolean Standard: true
Legen Sie die Dropdown-Breite auf die Eingabebreite fest (anstatt so breit wie der längste Ländername). Spielen Sie mit dieser Option im Storybook (mithilfe der React-Komponente).
formatAsYouType
Typ: Boolean Standard: true
Formatieren Sie die Zahl automatisch, während der Benutzer sie eingibt. Diese Funktion wird deaktiviert, wenn der Benutzer seine eigenen Formatierungszeichen eingibt. Erfordert das Laden des Utils-Skripts.
formatOnDisplay
Typ: Boolean Standard: true
Formatieren Sie den Eingabewert (gemäß der Option nationalMode ) während der Initialisierung und bei setNumber . Erfordert das Laden des Utils-Skripts.
geoIpLookup
Typ: Function Standard: null
Wenn Sie initialCountry auf "auto" setzen, müssen Sie diese Option verwenden, um eine benutzerdefinierte Funktion anzugeben, die einen IP-Suchdienst aufruft, um den Standort des Benutzers zu ermitteln, und dann den success mit dem entsprechenden Ländercode aufruft. Beachten Sie außerdem, dass beim Instanziieren des Plugins ein Promise-Objekt unter der promise -Instanzeigenschaft zurückgegeben wird, sodass Sie beispielsweise iti.promise.then(...) ausführen können, um zu erfahren, wann Initialisierungsanforderungen wie diese abgeschlossen wurden.
Hier ist ein Beispiel für die Verwendung des ipapi-Dienstes:
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 ( ) ; } ) ;
}
} ) ; Beachten Sie, dass der failure -Callback im Fehlerfall aufgerufen werden muss, weshalb in diesem Beispiel catch() verwendet wird. Tipp: Speichern Sie das Ergebnis in einem Cookie, um wiederholte Suchvorgänge zu vermeiden!
versteckte Eingabe
Typ: Function Standard: null
Ermöglicht die Erstellung versteckter Eingabefelder innerhalb eines Formulars, um die vollständige internationale Telefonnummer und die ausgewählte Landesvorwahl zu speichern. Es akzeptiert eine Funktion, die als Argument den Namen des Haupttelefoneingangs erhält. Diese Funktion sollte ein Objekt mit phone und (optional) country zurückgeben, um die Namen der versteckten Eingaben für die Telefonnummer bzw. die Landesvorwahl anzugeben. Dies ist bei Nicht-Ajax-Formularübermittlungen nützlich, um sicherzustellen, dass die vollständige internationale Nummer und Ländervorwahl erfasst wird, insbesondere wenn nationalMode aktiviert ist.
* Hinweis : Für diese Funktion muss sich die Eingabe innerhalb eines <form> -Elements befinden, da auf das submit -Ereignis im nächstgelegenen Formularelement gewartet wird. Beachten Sie außerdem, dass getNumber intern verwendet wird und daher erstens das Laden des Utils-Skripts erforderlich ist und zweitens eine gültige Zahl erwartet wird. Daher funktioniert es nur dann korrekt, wenn Sie isValidNumber zur Validierung der Zahl verwendet haben, bevor Sie das Absenden des Formulars zulassen.
intlTelInput ( input , {
hiddenInput : function ( telInputName ) {
return {
phone : "phone_full" ,
country : "country_code"
} ;
}
} ) ;Dadurch werden die folgenden (versteckten) Elemente generiert, die beim Absenden automatisch ausgefüllt werden:
< input type =" hidden " name =" phone_full " >
< input type =" hidden " name =" country_code " > i18n
Typ: Object Standard: {}
Erlauben Sie die Lokalisierung/Anpassung der über 200 Ländernamen sowie anderer Benutzeroberflächentexte (z. B. den Platzhaltertext für die Ländersucheingabe). Der einfachste Weg, dies zu tun, besteht darin, einfach eines der bereitgestellten Übersetzungsmodule zu importieren und i18n auf diesen Wert zu setzen (siehe Option 1 unten). Sie können auf diese Weise auch einen oder mehrere einzelne Schlüssel überschreiben (siehe Option 1 unten). Alternativ können Sie Ihre eigenen benutzerdefinierten Übersetzungen bereitstellen (siehe Option 2 unten). Wenn Sie Ihre eigenen angeben, müssen Sie alle Ländernamen (die aus dem Länderlistenprojekt kopiert werden können, z. B. hier sind die Ländernamen auf Französisch) sowie einige UI-Zeichenfolgen (unten aufgeführt) angeben. Siehe Beispiel.
Wenn wir eine von Ihnen benötigte Sprache derzeit nicht unterstützen, können Sie diese ganz einfach selbst beisteuern – Sie müssen nur eine Handvoll UI-Übersetzungszeichenfolgen bereitstellen, da wir die Ländernamen automatisch aus dem Länderlistenprojekt abrufen.
Option 1: Importieren Sie eines der bereitgestellten Übersetzungsmodule
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: Definieren Sie Ihre eigenen benutzerdefinierten Übersetzungen
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" ,
}
} ) ; Anfangsland
Typ: String Standard: ""
Legen Sie die anfängliche Länderauswahl fest, indem Sie den Ländercode angeben, z. B. "us" für die Vereinigten Staaten. (Achten Sie darauf, dies nicht zu tun, es sei denn, Sie sind sich über das Land des Benutzers sicher, da es bei falscher Einstellung zu kniffligen Problemen führen kann und der Benutzer seine nationale Nummer automatisch ausfüllt und das Formular ohne Überprüfung absendet – in bestimmten Fällen kann die Validierung bestehen und es kann passieren, dass Sie eine Nummer mit dem falschen Vorwahlcode speichern. Sie können initialCountry auch auf "auto" setzen, wodurch das Land des Benutzers anhand seiner IP-Adresse ermittelt wird (erfordert die Option geoIpLookup – siehe Beispiel). Beachten Sie, dass bei Verwendung initialCountry die Länderauswahl nicht aktualisiert wird, wenn die Eingabe bereits eine Nummer mit einer internationalen Vorwahl enthält.
LoadUtilsOnInit (siehe Diskussion zu Version 25)
Typ: String oder () => Promise<module> Standard: "" Beispiel: "/build/js/utils.js"
Dies ist eine Möglichkeit, die enthaltenen utils.js (verzögert) zu laden (um Formatierung/Validierung usw. zu aktivieren) – weitere Optionen finden Sie unter Laden des Dienstprogramm-Skripts. Sie müssen die Datei utils.js hosten und dann die Option loadUtilsOnInit auf diese URL setzen oder sie alternativ einfach auf eine vom CDN gehostete Version verweisen, z. B. "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" . Das Skript wird über eine dynamische Importanweisung geladen, was bedeutet, dass die URL nicht relativ sein kann, sondern absolut sein muss.
Alternativ kann dies eine Funktion sein, die ein Versprechen für das utils-Modul zurückgibt. Wenn Sie einen Bundler wie Webpack verwenden, können Sie damit dem Bundler mitteilen, dass das Utils-Skript in einer separaten Datei vom Rest Ihres Codes gespeichert werden soll. Zum Beispiel: { loadUtilsOnInit: () => import("intl-tel-input/utils") } .
Das Skript wird nur abgerufen, wenn Sie das Plugin initialisieren, und außerdem erst, wenn der Ladevorgang der Seite abgeschlossen ist (beim Fensterladeereignis), um eine Blockierung zu verhindern (das Skript ist ~260 KB groß). Beim Instanziieren des Plugins wird ein Promise-Objekt unter der promise -Instanzeigenschaft zurückgegeben, sodass Sie beispielsweise iti.promise.then(callback) ausführen können, um zu erfahren, wann solche Initialisierungsanforderungen abgeschlossen sind. Weitere Informationen finden Sie unter Dienstprogramm-Skript.
nationalMode
Typ: Boolean Standard: true
Formatieren Sie Zahlen im nationalen Format und nicht im internationalen Format. Dies gilt für Platzhalternummern und für die Anzeige vorhandener Nummern von Benutzern. Beachten Sie, dass es für Benutzer in Ordnung ist, ihre Nummern im nationalen Format einzugeben – solange sie das richtige Land ausgewählt haben, können Sie getNumber verwenden, um eine vollständige internationale Nummer zu extrahieren – siehe Beispiel. Es wird empfohlen, diese Option aktiviert zu lassen, um Benutzer dazu zu ermutigen, ihre Nummern im nationalen Format einzugeben, da ihnen dieses normalerweise vertrauter ist und somit ein besseres Benutzererlebnis bietet.
nur Länder
Typ: Array Standard: []
Zeigen Sie im Dropdown-Menü nur die von Ihnen angegebenen Länder an – siehe Beispiel.
placeholderNumberType
Typ: String Standard: "MOBILE"
Geben Sie einen der Schlüssel aus der Aufzählung intlTelInput.utils.numberType an (z. B. "FIXED_LINE" ), um den Nummerntyp festzulegen, der für den Platzhalter verwendet werden soll. Spielen Sie mit dieser Option im Storybook (mithilfe der React-Komponente).
Flaggen anzeigen
Typ: Boolean Standard: true
Setzen Sie dies auf „false“, um die Flaggen beispielsweise aus politischen Gründen auszublenden. Stattdessen wird ein allgemeines Globussymbol angezeigt. Spielen Sie mit dieser Option im Storybook (mithilfe der React-Komponente).
separateDialCode
Typ: Boolean Standard: false
Zeigen Sie die internationale Vorwahl des ausgewählten Landes neben der Eingabe an, sodass es aussieht, als wäre sie Teil der eingegebenen Nummer. Da der Benutzer die angezeigte Vorwahl nicht bearbeiten kann, versucht er möglicherweise, eine neue einzugeben. Um zu vermeiden, dass zwei Vorwahlen nebeneinander angezeigt werden, öffnen wir in diesem Fall automatisch das Länder-Dropdown und fügen die neue Vorwahl in die Sucheingabe ein stattdessen. Wenn sie also +54 eingeben, wird Argentinien im Dropdown-Menü hervorgehoben und sie können einfach die Eingabetaste drücken, um es auszuwählen, wodurch die angezeigte Vorwahl aktualisiert wird (für diese Funktion müssen allowDropdown und countrySearch aktiviert sein). Spielen Sie mit dieser Option im Storybook (mithilfe der React-Komponente).
strictMode
Typ: Boolean Standard: false
Ignorieren Sie alle irrelevanten Zeichen, während der Benutzer die Eingabe eingibt. Der Benutzer kann am Anfang nur numerische Zeichen und ein optionales Pluszeichen eingeben. Begrenzen Sie die Länge auf die maximal gültige Zahlenlänge (dies berücksichtigt validationNumberType ). Erfordert das Laden des Utils-Skripts. Siehe Beispiel.
benutzeFullscreenPopup
Typ: Boolean Standard: true on mobile devices, false otherwise
Steuern Sie, wann die Länderliste als Vollbild-Popup oder als Inline-Dropdown angezeigt wird. Standardmäßig wird es auf Mobilgeräten als Vollbild-Popup (basierend auf Benutzeragent und Bildschirmbreite) angezeigt, um den begrenzten Platz besser zu nutzen (ähnlich wie ein natives <select> funktioniert) und als Inline-Dropdown größere Geräte/Bildschirme. Spielen Sie mit dieser Option im Storybook (mithilfe der React-Komponente).
utilsScript
Typ: String oder () => Promise<module> Standard: "" Beispiel: "/build/js/utils.js"
Diese Option ist veraltet und wurde in loadUtilsOnInit umbenannt. Bitte lesen Sie die Einzelheiten zu dieser Option und verwenden Sie sie stattdessen.
validationNumberType
Typ: String Standard: "MOBILE"
Geben Sie einen der Schlüssel aus der Aufzählung intlTelInput.utils.numberType an (z. B. "FIXED_LINE" ), um den Zahlentyp festzulegen, der während der Validierung mit isValidNumber erzwungen werden soll, sowie die Zahlenlänge, die mit strictMode erzwungen werden soll. Setzen Sie es auf null um keinen bestimmten Typ zu erzwingen.
In diesen Beispielen bezieht sich iti auf die Plugin-Instanz, die zurückgegeben wird, wenn Sie das Plugin initialisieren, z
const iti = intlTelInput ( input ) ; zerstören
Entfernen Sie das Plugin aus der Eingabe und heben Sie die Bindung aller Ereignis-Listener auf.
iti . destroy ( ) ; getExtension
Rufen Sie die Durchwahl der aktuellen Nummer ab. Erfordert das Laden des Utils-Skripts.
const extension = iti . getExtension ( ) ; Gibt eine Zeichenfolge zurück, z. B. wenn der Eingabewert "(702) 555-5555 ext. 1234" wäre, würde dies "1234" zurückgeben.
getNumber
Rufen Sie die aktuelle Nummer im angegebenen Format ab (standardmäßig E.164-Standard). Die verschiedenen Formate stehen im Enum intlTelInput.utils.numberFormat zur Verfügung, das Sie hier sehen können. Erfordert das Laden des Utils-Skripts. Beachten Sie, dass selbst wenn nationalMode aktiviert ist, dadurch immer noch eine vollständige internationale Nummer zurückgegeben werden kann. Beachten Sie außerdem, dass diese Methode eine gültige Zahl erwartet und daher erst nach der Validierung verwendet werden sollte.
const number = iti . getNumber ( ) ;
// or
const number = iti . getNumber ( intlTelInput . utils . numberFormat . E164 ) ; Gibt eine Zeichenfolge zurück, z. B. "+17024181234"
getNumberType
Rufen Sie den Typ (Festnetz/Mobilfunk/gebührenfrei usw.) der aktuellen Nummer ab. Erfordert das Laden des Utils-Skripts.
const numberType = iti . getNumberType ( ) ; Gibt eine Ganzzahl zurück, die Sie mit den verschiedenen Optionen in der Aufzählung intlTelInput.utils.numberType vergleichen können, z. B
if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
// is a mobile number
} Beachten Sie, dass es in den USA keine Möglichkeit gibt, zwischen Festnetz- und Mobilfunknummern zu unterscheiden. Stattdessen wird FIXED_LINE_OR_MOBILE zurückgegeben.
getSelectedCountryData
Rufen Sie die Länderdaten für das aktuell ausgewählte Land ab.
const countryData = iti . getSelectedCountryData ( ) ;Gibt etwa Folgendes zurück:
{
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} getValidationError
Erhalten Sie weitere Informationen zu einem Validierungsfehler. Erfordert das Laden des Utils-Skripts.
const error = iti . getValidationError ( ) ; Gibt eine Ganzzahl zurück, die Sie mit den verschiedenen Optionen in der Aufzählung intlTelInput.utils.validationError vergleichen können, z. B
if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
// the number is too short
} isValidNumber
Überprüfen Sie, ob die aktuelle Nummer anhand ihrer Länge gültig ist – siehe Beispiel, was für die meisten Anwendungsfälle ausreichend sein sollte. Eine genauere Validierung finden Sie unter isValidNumberPrecise . Der Vorteil von isValidNumber besteht jedoch darin, dass es viel zukunftssicherer ist, da Länder auf der ganzen Welt zwar regelmäßig ihre Nummernregeln aktualisieren, ihre Nummernlängen jedoch nur sehr selten ändern. Wenn diese Methode false zurückgibt, können Sie getValidationError verwenden, um weitere Informationen abzurufen. Respektiert die Option validationNumberType (die standardmäßig auf „MOBILE“ eingestellt ist). Erfordert das Laden des Utils-Skripts.
const isValid = iti . isValidNumber ( ) ; Gibt zurück: true / false
isValidNumberPrecise
Überprüfen Sie, ob die aktuelle Nummer gültig ist, indem Sie genaue Zuordnungsregeln für jedes Land/jede Ortsvorwahl usw. verwenden – siehe Beispiel. Beachten Sie, dass sich diese Regeln jeden Monat für verschiedene Länder auf der ganzen Welt ändern. Sie müssen daher darauf achten, das Plugin auf dem neuesten Stand zu halten, da Sie sonst anfangen, gültige Nummern abzulehnen. Eine einfachere und zukunftssicherere Form der Validierung finden Sie oben unter isValidNumber . Wenn die Validierung fehlschlägt, können Sie getValidationError verwenden, um weitere Informationen abzurufen. Erfordert das Laden des Utils-Skripts.
const isValid = iti . isValidNumberPrecise ( ) ; Gibt zurück: true / false
setCountry
Ändern Sie das ausgewählte Land. Es sollte, wenn überhaupt, selten vorkommen, dass Sie dies tun müssen, da das ausgewählte Land automatisch aktualisiert wird, wenn Sie setNumber aufrufen und eine Nummer einschließlich einer internationalen Vorwahl übergeben, was die empfohlene Verwendung ist. Beachten Sie, dass Sie das Ländercode-Argument weglassen können, um das Land auf den standardmäßig leeren (Globus-)Status festzulegen.
iti . setCountry ( "gb" ) ; setNumber
Geben Sie eine Nummer ein und aktualisieren Sie das ausgewählte Land entsprechend. Beachten Sie, dass bei aktivierter formatOnDisplay versucht wird, die Zahl entsprechend der Option nationalMode entweder in ein nationales oder ein internationales Format zu formatieren.
iti . setNumber ( "+447733123456" ) ; setPlaceholderNumberType
Ändern Sie die Option „placeholderNumberType“.
iti . setPlaceholderNumberType ( "FIXED_LINE" ) ; setDisabled
Aktualisiert das deaktivierte Attribut sowohl des Telefoneingangs als auch der ausgewählten Länderschaltfläche. Akzeptiert einen booleschen Wert. Hinweis: Wir empfehlen, dies zu verwenden, anstatt das deaktivierte Attribut der Eingabe direkt zu aktualisieren.
iti . setDisabled ( true ) ; getCountryData
Rufen Sie die Länderdaten des Plugins ab – entweder zur Wiederverwendung an anderer Stelle, z. B. zum Generieren Ihres eigenen Länder-Dropdowns – siehe Beispiel, oder Sie können es alternativ zum Ändern der Länderdaten verwenden. Beachten Sie, dass alle Änderungen vor der Initialisierung des Plugins vorgenommen werden müssen.
const countryData = intlTelInput . getCountryData ( ) ;Gibt ein Array von Länderobjekten zurück:
[ {
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} , ... ] getInstance
Nach der Initialisierung des Plugins können Sie mit dieser Methode jederzeit wieder auf die Instanz zugreifen, indem Sie einfach das entsprechende Eingabeelement übergeben.
const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc LoadUtils (siehe Version 25-Diskussion)
Als Alternative zur Option loadUtilsOnInit ermöglicht diese Methode das manuelle Laden des utils.js-Skripts bei Bedarf, um Formatierung/Validierung usw. zu aktivieren. Weitere Informationen finden Sie unter „Laden des Utilities-Skripts“. Diese Methode sollte nur einmal pro Seite aufgerufen werden. Es wird ein Promise-Objekt zurückgegeben, sodass Sie mit loadUtils().then(callback) wissen können, wann es fertig ist.
// 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 */ } }
} ) ; Sie können auf die folgenden Ereignisse warten, die am Eingabeelement ausgelöst werden.
Länderwechsel
Dies wird ausgelöst, wenn das ausgewählte Land aktualisiert wird, z. B. wenn der Benutzer ein Land aus der Dropdown-Liste auswählt, eine andere Vorwahl in die Eingabe eingibt oder Sie setCountry usw. aufrufen.
input . addEventListener ( "countrychange" , function ( ) {
// do something with iti.getSelectedCountryData()
} ) ;Ein Beispiel finden Sie hier: Ländersynchronisierung
open:countrydropdown
Dies wird ausgelöst, wenn der Benutzer das Dropdown öffnet.
close:countrydropdown
Dies wird ausgelöst, wenn der Benutzer das Dropdown schließt.
Für die Themengestaltung stehen zahlreiche CSS-Variablen zur Verfügung. Die vollständige Liste finden Sie in intlTelInput.scss.
Was den leeren Zustand (Globussymbol) betrifft, ist die Standardversion dunkelgrau, und wir bieten auch eine „helle“ Version an, die besser mit einem dunklen Thema funktionieren sollte. Alternativ können Sie das Globussymbol ganz einfach in der Farbe neu generieren, die Sie für Ihr Thema benötigen. Wir empfehlen Ihnen, es in der höchstmöglichen Auflösung herunterzuladen und das Bild dann auf die erforderliche Größe zu verkleinern (20 Pixel breit für die Standardversion und 40 Pixel breit für die @2x-Version).
Beispiel für den Dunkelmodus (mit Screenshot unten):
@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]" );
}
}
