HOSTBLOGGER.de

Ich finde die Version am besten, die die Autovervollständigung automatisch ausfüllt.

Ich würde sogar für eine 2-Feld-Variante plädieren: Auswahl des Landes und dann ein Eingabefeld für die Telefonnummer (incl. Vorwahl).

Hab's jetzt natürlich hier nicht getestet, mich stört aber an solchen Aufteilungen immer die Frage, ob die Vorwahl jetzt mit oder ohne führender Null eingegeben werden muss. Hab da schon beide Varianten mehrfach erlebt.
Daher sollte das Vorwahlfeld beides akzeptieren und dann im Hintergrund automtatisch richtig zusammenformatieren.

Insgesamt fände ich aber EIN Feld für Vorwahl + Rufnummer doch besser. Die abgetrennte Länderauswahl kann ich gut nachvollziehen, vor allem als Listenfeld, aber der Rest sollte ein Feld sein, das verschiedene (mehr oder weniger konforme) Formatierungen erlaubt. Bspw:

0140 1234567
140 1234567
0140 123 45 67
+491401234567
usw.

Man sollte halt immer von der nicht vorhandenen Fachkompetenz des Anwenders ausgehen..

Ich glaube, der Benutzer kommt mit allen Varianten zurecht und wird das 30 Sekunden später wieder vergessen haben.

Aber wenn du es richtig benutzerfreundlich machen willst, lass ein Feld für die Rufnummer und ein Drop-down (oder was ajax-mäßiges), vorausgewählt anhand der Anschrift, und mach das aufteilen in Vorwahl und Rufnummer, wenn du das brauchst, intern.

Das Internet hat letztes Jahr eine umfangreiche UI-Studie mit innovativen Ideen dazu durchgeführt. https://imgur.com/gallery/r102w (Und das ist nur ein Bruchteil aller Vorschläge…)

Diese Trennung finde ich sehr nervig, der Chrome-Autofill-Mechanismus neigt dazu dann zweimal die Telefonnummer einfügen.

Imho ist ein einziger HTML5-tel-Input die beste Möglichkeit, das folgt auch dem Standard (https://html.spec.whatwg.org/dev/input.html#telephone-state-%28type=tel%29¹)
Dazu natürlich auch noch die entsprechenden autocomplete-Tags. (https://html.spec.whatwg.org/dev/form-control-infrastructure.html#autofill)

Das tel-Feld führt v.A. auf mobilen Devices dazu, dass das Telefon-Tastenfeld als Tastatur angezeigt wird.

So Sachen wir das Dropdown für die Ländervorwahl oder ggf. Formatierung wie Leerzeichen nach der Ortsvorwahl würde ich dann eher per Javascript und nur für die Anzeige lösen. Google bringt z.B. dieses ganz gut aussehende jQuery-Plugin zu Tage: https://intl-tel-input.com/
Das wählt bspw. auch den passenden Dropdown-Eintrag aus, wenn man eine Telefonnummer mit + und Ländervorwahl eintippt. und validiert das Feld auch gleich noch.

Was btw. auch noch nervig ist, ist die Unterscheidung in Handy- und Festnetz-Nummer. Der autofill-Tag unterscheidet da nämlich nicht und meine Handynummer landet deswegen gerne stattdessen im Festznetzfeld. Eine interessante Lösung fände ich da, einfach n Telefonnummern zu akzeptieren und diese einfach mittels libphonenumber (die verwendet auch das jQuery-Plugin) als Mobilfunk- oder Festnetznummer zuzuordnen.

¹ Der BB-Code-Parser scheitert an den runden Klammern im Anker, wenn man die die nicht manuell in Prozentdarstellung umwandelt…

Meine Erfahrung mit der Vorwahl: Durch das Wappen kann man nicht quasi vorausfüllen - und das richtige Land zu finden empfinde ich dann eher als Qual. Lieber als Textfeld lassen.

Maximal zwei Felder: Eins für die Landesvorwahl und eines für die eigentliche Telefonnummer.

Oder vielleicht doch eine von diesen Lösungen?
https://qz.com/679782/programmers-imagine-the-most-ridiculous-ways-to-input-a-phone-number/