Intel-Tel-Eingabe

Internationale Telefoneingabe

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.

Gesponsert von

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.

Inhaltsverzeichnis

• React- und Vue-Komponenten
• Demo und Beispiele
• Mobile
• Merkmale
• Browserkompatibilität
• Erste Schritte
• Empfohlene Verwendung
• Initialisierungsoptionen
• Instanzmethoden
• Statische Methoden
• Veranstaltungen
• Theming / Dunkler Modus
• Übersetzungen
• Dienstprogramm-Skript
• Laden des Dienstprogrammskripts
• Fehlerbehebung
• Mitwirken
• Zuschreibungen

React- und Vue-Komponenten

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.

Demo und Beispiele

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.

Mobile

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 -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).

Merkmale

• Wählen Sie mithilfe einer IP-Suche automatisch das aktuelle Land des Benutzers aus
• Setzen Sie den Eingabeplatzhalter automatisch auf eine Beispielnummer für das ausgewählte Land
• Navigieren Sie durch das Länder-Dropdown-Menü, indem Sie den Namen eines Landes eingeben oder die Auf-/Ab-Tasten verwenden
• Formatieren Sie die Zahl automatisch, während der Benutzer sie eingibt
• Lassen Sie optional nur numerische Zeichen zu und begrenzen Sie die Zahl auf die maximal gültige Länge
• Der Benutzer gibt seine nationale Nummer ein und das Plugin gibt Ihnen die vollständige standardisierte internationale Nummer
• Zahlenvalidierung, einschließlich spezifischer Fehlertypen
• Hochauflösende Flaggenbilder
• Barrierefreiheit über ARIA-Tags
• Typescript-Typdefinitionen enthalten
• Passen Sie Stile ganz einfach an, indem Sie CSS-Variablen überschreiben
• React- und Vue-Komponenten sind ebenfalls enthalten
• Übersetzungen für Ländernamen (usw.) in vielen verschiedenen Sprachen
• Viele Initialisierungsoptionen zur Anpassung sowie Instanzmethoden/Ereignisse zur Interaktion

Browserkompatibilität

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.

Erste Schritte (mit einem CDN)

1. Fügen Sie das CSS hinzu

">

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css " >

2. Fügen Sie das Plugin-Skript hinzu und initialisieren Sie es in Ihrem Eingabeelement

">

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

Erste Schritte (Verwendung eines Bundlers, z. B. Webpack)

1. Installieren Sie mit npm: npm install intl-tel-input --save oder Yarn: yarn add intl-tel-input

2. Importieren Sie das CSS: import 'intl-tel-input/build/css/intlTelInput.css';

3. 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]' );
}

4. Importieren Sie das JS und initialisieren Sie das Plugin auf Ihrem Eingabeelement

import("intl-tel-input/utils") });">

 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` ;
} ) ; 

Erste Schritte (kein Bundler verwenden)

1. Laden Sie die neueste Version herunter oder installieren Sie sie besser mit npm

2. Fügen Sie das Stylesheet hinzu

">

 < link rel =" stylesheet " href =" path/to/intlTelInput.css " >

3. 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]' );
}

4. Fügen Sie das Plugin-Skript hinzu und initialisieren Sie es in Ihrem Eingabeelement

">

 < script src =" path/to/intlTelInput.js " >  script >
< script >
  const input = document . querySelector ( "#phone" ) ;
  window . intlTelInput ( input , {
    loadUtilsOnInit : "path/to/utils.js"
  } ) ;
 script > 

Empfohlene Verwendung

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. „[phone]“) 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.

Initialisierungsoptionen

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 außerdem die ausgewählte Flagge stattdessen rechts an, da es sich lediglich um eine Zustandsmarkierung handelt. Beachten Sie, dass bei aktiviertem separateDialCode allowDropdown auf true gesetzt wird, da die Dropdown-Liste 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

.

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!

versteckter Eingang
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

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