Erstellen eines Eingabefelds für internationale Telefonnummern in HTML und JavaScript

Erstellen eines Eingabefelds für internationale Telefonnummern in HTML und JavaScript

Der internationale Standard für Telefonnummern wird in der Richtlinie E.164 geregelt, die vorschreibt, in welchem Format Ländervorwahlen und Rufnummern kombiniert werden: +14155552671. Dieses Format ist für viele APIs (einschließlich Twilio-APIs) erforderlich und bedeutet für uns, dass wir Ländervorwahlen und Telefonnummern nicht in zwei verschiedenen Datenbankspalten speichern müssen.

Wir möchten jedoch nicht, dass die Benutzer ein +-Zeichen und die Ländervorwahl eingeben müssen, wenn sie ihre Telefonnummer für folgende Zwecke angeben:

• Registrierung eines neuen Kontos
• Aktivierung von 2FA für SMS
• Bitte um Rückruf vom Kundenservice
• Anmeldung für Marketingmitteilungen

In diesem Blogbeitrag beschreibe ich, wie ein Eingabefeld für Telefonnummern erstellt wird, um Telefonnummern zu verarbeiten und zu analysieren. Dazu verwenden wir einfaches HTML, JavaScript und das Plug-in intl-tel-input. Ich gebe am Ende des Beitrags auch ein paar Empfehlungen zur Verifizierung von Telefonnummern und zur Betrugsprävention.

Der vollständige Code befindet sich auf meinem GitHub.

Was kann das Plug-in „intl-tel-input“?

Dieses Projekt macht starken Gebrauch von intl-tel-input, einem „JavaScript-Plug-in zur Eingabe und Validierung von internationalen Telefonnummern“. Ich erkläre hier die übliche Einrichtung des Plug-ins, aber es hat noch viele zusätzliche Konfigurationsoptionen, die du in der Dokumentation erkunden kannst.

Das Plug-in stellt eine Dropdownliste mit Ländervorwahlen bereit, die Flaggen für die verschiedenen Länder anzeigt. Es verarbeitet außerdem die Rufnummer bzw. das „nationale Format“ der Nummer, um die Benutzereingabe zu normalisieren, die möglicherweise Leerzeichen, Klammern, Striche und dergleichen enthält.

Einbetten des Plug-ins „intl-tel-input“ in den Code

Wir möchten die Sache nicht zu kompliziert machen, deshalb beginnen wir mit einfachem HTML und JavaScript. Wir erstellen eine Datei mit dem Namen index.html und geben den folgenden Code darin ein:

Dadurch nutzen wir die CDN-Versionen des CSS und JS des Plug-ins, womit wir die Dropdownliste mit den Ländervorwahlen anzeigen und die Telefonnummern verarbeiten können. Ich verwende hier v17.0.8, die neueste Version findest du jedoch unter den Tags. Du kannst das Plug-in auch mit einem Bundler installieren oder den Quellcode selbst herunterladen und hosten.

Für einen besseren Stil erstellen wir eine neue Datei im selben Ordner mit dem Namen styles.css und fügen diese CSS hinzu.

Als Nächstes fügen wir das Formular hinzu, in dem das Telefonnummern-Eingabefeld enthalten ist. Innerhalb der body-Tags der index.html-Datei fügen wir folgendes HTML hinzu:

Wenn wir diese Datei jetzt in einen Browser laden, sehen wir zwar das Formularfeld, aber noch keine Formatierung, da wir das Plug-in erst noch initialisieren müssen.

Initialisieren des Plug-ins „intl-tel-input“

Unterhalb des Textes, aber innerhalb des HTML fügen wir ein „script“-Tag und den folgenden Initialisierungscode hinzu:

utilsScript ist technisch zwar optional, aber es bietet eine Reihe wirklich nützlicher Funktionen, wie länderspezifische Platzhalter und die E.164-Formatierung, die wir nachfolgend verwenden werden.

Wenn wir die Seite jetzt neu laden, sollten wir die Länderauswahl und einen Platzhalter sehen.

Verarbeiten der Telefonnummerneingabe für das internationale Format

Wir fügen unterhalb unseres Formulars ein Benachrichtigungsbanner ein. Das hilft uns bei der Anzeige der Ergebnisse.

Als Nächstes fügen wir eine Funktion hinzu, die die Formularübermittlung behandelt. Innerhalb des <script>-Tags und nach der Plug-in-Initialisierung fügen wir Folgendes hinzu:

Der wichtigste Teil hier ist phoneInput.getNumber(). Das ist der Plug-in-Code, der die ausgewählte Ländervorwahl und Benutzereingabe in das internationale Format umwandelt.

Wenn wir jetzt die Seite neu laden und eine Telefonnummer eingeben, sollten wir das internationale Format sehen.

Bonus: Einstellen der Standortabhängigkeit des Plug-ins

Standardmäßig ist das Plug-in auf die USA eingestellt, aber ich gehe davon aus, dass du dieses Eingabefeld implementieren möchtest, weil du mit Benutzern auf der ganzen Welt zu tun hast. Wir können die Einstellungen so aktualisieren, dass der Standort der Benutzer anhand ihrer IP-Adresse berücksichtigt wird.

Unter IPinfo kannst du dich für ein kostenloses Konto registrieren und erhältst ein Zugriffstoken. Hierfür kannst du auch eine andere IP-Adressen-API verwenden, falls du bereits eine hast. Oberhalb des <script>-Tags fügen wir die folgende Funktion hinzu, bevor wir das phoneInputField-Objekt definieren:

Dann aktualisieren wir die Initialisierung von „intl-tel-input“ mit zwei Parametern: initialCountry: "auto" und geoIpLookup: getIp.

Wenn wir jetzt unser VPN auf Österreich einstellen, aktualisiert das Plug-in das standardmäßig angezeigte Land.

Bonus: Hinzufügen von bevorzugten Ländern

Eine meiner anderen Lieblingsfunktionen ist die Einstellung „Bevorzugte Länder“. Damit können wir Länder festlegen, die oben in der Liste angezeigt werden sollen. Im Rahmen dieses Beispiels habe ich ermittelt, dass sich die meisten unserer Benutzer in den USA, in Kolumbien, Indien und Deutschland befinden, und habe diese Optionen priorisiert.

Die zugehörige Einstellung aktualisieren wir an der Stelle, an der das Plug-in initialisiert wird. Dazu fügen wir das Array preferredCountries im Format der ISO-3166-1-ALPHA-2-Kodierliste  hinzu:

Validieren der Telefonnummerneingabe

Dir ist vielleicht aufgefallen, dass in dieses Formular immer noch ungültige Telefonnummern eingegeben werden können. In meinem Blogbeitrag Überprüfen der Telefonnummerneingabe in HTML und JavaScript erkläre ich, wie wir Telefonnummern validieren, damit wir Eingaben wie die folgende verhindern:

Best Practices für die Verifizierung von Telefonnummern

Wir möchten auf alle Fälle die Telefonnummern im E.164-Format normalisieren, aber wenn wir diese Nummern auch speichern möchten, sollten wir sie außerdem bestätigen. Durch die Bestätigung von Telefonnummern stellen wir sicher, dass Benutzer nicht versehentlich eine falsche Nummer eingegeben haben, dass sie die Kontrolle über die in ihrem Konto hinterlegte Nummer haben und dass wir Mitteilungen nicht an die falsche Person senden. Du verstehst, was ich meine. Mit der Twilio Verify-API ist die Bestätigung von Telefonnummern über SMS oder einen Sprachanruf ein Kinderspiel. In diesem Projekt auf unserem CodeExchange erfährst du, wie Einmal-Sicherheitscodes implementiert werden (mit der Telefonnummerneingabe ist die halbe Arbeit bereits erledigt).

Das könnte dich außerdem interessieren:

• Dokumentation zur Twilio Lookup-API
• Serverloses Bestätigen von Telefonnummern mit Twilio Verify
• So kannst du Benutzer dazu anregen, 2FA zu aktivieren
• Schneller Checkout über SMS-Bestätigung mit Stripe und Twilio

Noch Fragen zur Eingabe und Bestätigung von Telefonnummern? Du findest mich auf Twitter unter @kelleyrobinson. Ich bin gespannt, von deinen Entwicklungen zu hören.