Alles, was Sie jemals über inputmode wissen wollten

Das globale Attribut inputmode gibt Browsern auf Geräten mit Bildschirmtastaturen einen Hinweis, welche Tastatur angezeigt werden soll, wenn ein Benutzer ein input- oder textarea-Element ausgewählt hat.

<input type="text" inputmode="" />
<textarea inputmode="" />

Im Gegensatz zur Änderung des type des Formulars ändert inputmode nicht die Art und Weise, wie der Browser die Eingabe interpretiert – es weist den Browser an, welche Tastatur angezeigt werden soll.

Das inputmode Attribut hat eine lange Geschichte, wurde aber erst sehr kürzlich von den beiden großen mobilen Browsern übernommen: Safari für iOS und Chrome für Android. Zuvor wurde es bereits 2012 in Firefox für Android implementiert und dann einige Monate später wieder entfernt (obwohl es immer noch über ein Flag verfügbar ist).

Fast sechs Jahre später implementierte Chrome für Android die Funktion – und mit der kürzlichen Veröffentlichung von iOS 12.2 unterstützt Safari es jetzt auch.

Basierend auf meinen Tests wird inputmode tatsächlich in Opera Mini und Opera Mobile unterstützt, was den obigen Caniuse-Daten widerspricht. Ich habe mich gemeldet, um zu sehen, ob wir unsere Erkenntnisse synchronisieren können.

Bevor wir uns jedoch eingehend mit den Einzelheiten des Attributs befassen, sollten wir bedenken, dass der WHATWG Living Standard inputmode dokumentiert, während die W3C 5.2 Spezifikation es nicht mehr in ihrem Inhaltsverzeichnis aufführt, was darauf hindeutet, dass sie es als veraltet betrachten. Da WHATWG es dokumentiert hat und die Browser daran gearbeitet haben, es zu unterstützen, gehen wir davon aus, dass die WHATWG-Spezifikationen der Standard sind.

inputmode akzeptiert eine Reihe von Werten. Lassen Sie uns diese einzeln durchgehen.

Keine

<input type="text" inputmode="none" />

Wir beginnen hier, da es sehr gut möglich ist, dass wir keine Art von Tastatur für eine Eingabe wünschen. Die Verwendung von inputmode=none zeigt auf Chrome für Android überhaupt keine Tastatur an. iOS 12.2 zeigt immer noch die standardmäßige alphanumerische Tastatur an, sodass die Angabe none in dieser Hinsicht eine Art Reset für iOS sein könnte. Unabhängig davon ist none für Inhalte gedacht, die eigene Tastatursteuerungen rendern.

Numerisch

<input type="text" inputmode="numeric" />

Dies ist wahrscheinlich einer der gebräuchlichsten inputmode Werte da draußen, da er ideal für Eingaben ist, die Zahlen, aber keine Buchstaben erfordern – Dinge wie PIN-Eingabe, Postleitzahlen, Kreditkartennummern usw. Die Verwendung des numeric Werts mit einer Eingabe vom type="text" kann tatsächlich sinnvoller sein als die alleinige Einstellung der Eingabe auf type="number", denn im Gegensatz zu einem type="number" kann inputmode="numeric" mit den Attributen maxlength, minlength und pattern verwendet werden, was es für verschiedene Anwendungsfälle vielseitiger macht.

Ich habe oft gesehen, dass Websites type=tel bei einer Eingabe verwenden, um eine numerische Tastatur anzuzeigen, und das stimmt als Workaround, ist aber semantisch nicht korrekt. Wenn Sie das stört, denken Sie daran, dass inputmode Muster unterstützt, wir können dem Input pattern="\d*" hinzufügen, um den gleichen Effekt zu erzielen. Das heißt, verwenden Sie dies nur, wenn Sie sicher sind, dass die Eingabe nur numerische Eingaben zulassen soll, da Android (im Gegensatz zu iOS) dem Benutzer nicht erlaubt, die Tastatur zu wechseln, um Buchstaben zu verwenden, was Benutzer versehentlich daran hindern könnte, gültige Daten einzureichen.

Tel

<input type="text" inputmode="tel" />

Die Eingabe einer Telefonnummer über eine Standard-alphanumerische Tastatur kann mühsam sein. Erstens repräsentiert jede Zahl auf einer Telefontastatur (außer 1 und 0) drei Buchstaben (z. B. 2 repräsentiert A, B und C), die mit der Zahl angezeigt werden. Die alphanumerische Tastatur referenziert diese Buchstaben nicht, sodass das Dekodieren einer Telefonnummer mit Buchstaben (z. B. 1-800-COLLECT) mehr Denkaufwand erfordert.

Die Verwendung von inputmode auf tel erzeugt eine standardmäßig aussehende Telefontastatur, einschließlich der Tasten für die Ziffern 0 bis 9, des Rautenzeichens (#) und des Sternchens (*). Außerdem erhalten wir diese alphabetischen Mnemotechnik-Beschriftungen (z. B. ABC).

Dezimal

<input type="text" inputmode="decimal" />

Eine auf den Wert decimal gesetzte inputmode führt zu einer subtilen Änderung in iOS, wo die Tastatur exakt gleich aussieht wie bei tel wert, aber die Taste +*# durch einen einfachen Dezimalpunkt (.) ersetzt. Auf der anderen Seite hat dies keine Auswirkungen auf Android, das einfach die numeric Tastatur verwendet.

E-Mail

<input type="text" inputmode="email" />

Ich bin sicher, Sie (und mindestens ein Bekannter von Ihnen) haben ein Formular ausgefüllt, das nach einer E-Mail-Adresse fragt, und mussten dann die Tastatur wechseln, um auf das @ Zeichen zuzugreifen. Das ist nicht lebensbedrohlich oder so, aber sicherlich auch keine großartige Benutzererfahrung.

Dafür ist der email Wert da. Er bringt das @ Zeichen ins Spiel, sowie den Punkt (.). Zeichen.

Dies könnte auch eine nützliche Tastatur für Benutzer sein, die einen Twitter-Benutzernamen eingeben müssen, da @ ein Kernzeichen von Twitter zur Identifizierung von Benutzern ist. Die E-Mail-Adressvorschläge, die iOS über der Tastatur anzeigt, könnten jedoch Verwirrung stiften.

Ein weiterer Anwendungsfall könnte sein, wenn Sie über ein eigenes Skript zur E-Mail-Validierung verfügen und die integrierte E-Mail-Validierung des Browsers nicht verwenden möchten.

URL

<input type="text" inputmode="url" />

Der url Wert bietet eine praktische Abkürzung für Benutzer, um TLDs (z. B. .com oder .co.uk) mit einer einzigen Taste anzuhängen, sowie Tasten, die typischerweise in Webadressen verwendet werden, wie Punkt (.) und Schrägstrich (/). Die genaue TLD, die auf der Tastatur angezeigt wird, ist an die Locale des Benutzers gebunden.

Dies könnte auch eine nützliche Tastatur für Benutzer sein, wenn Ihre Eingabe Domainnamen (z. B. css-tricks.com) sowie vollständige URIs (z. B. https://css-tricks.de) akzeptiert. Verwenden Sie stattdessen type="url", wenn Ihre Eingabe die Validierung der Eingabe erfordert.

Suche

<input type="text" inputmode="search" />

Dies zeigt eine blaue Go Taste auf iOS und eine grüne Enter Taste auf Android an, beide anstelle von Return. Wie Sie vielleicht am Namen des Wertes erraten haben, ist search für Suchformulare nützlich, da es die Submit-Taste liefert, um eine Anfrage zu stellen.

Wenn Sie auf iOS Search statt Enter und auf Android ein Lupensymbol anstelle des grünen Pfeils anzeigen möchten, verwenden Sie stattdessen type=search.

Andere Dinge, die Sie wissen sollten

• Chromium-basierte Browser unter Android – wie Microsoft Edge, Brave und Opera – teilen das gleiche inputmode Verhalten wie Chrome.
• Ich habe keine Details zu den Tastaturen auf iPads aufgeführt, um die Kürze zu wahren. Es ist größtenteils dasselbe wie auf dem iPhone, enthält aber mehr Tasten. Dasselbe gilt für Android-Tablets, abgesehen von Drittanbieter-Tastaturen, was ein weiteres Thema sein könnte, das es wert ist, behandelt zu werden.
• Die ursprüngliche vorgeschlagene Spezifikation enthielt die Werte kana und katakana für die japanische Eingabe, aber sie wurden nie von einem Browser implementiert und wurden seitdem aus der Spezifikation entfernt.
• latin-name war ebenfalls einer der Werte der ursprünglichen Spezifikation und wurde seitdem entfernt. Interessanterweise wird er, wenn er jetzt auf Safari für iOS verwendet wird, der Name des Benutzers als Vorschlag über der Tastatur angezeigt.

Demo

Oh, Sie möchten selbst sehen, wie all diese Eingabemodi funktionieren? Hier ist eine Demo, die Sie auf einem Gerät mit Touchscreen-Tastatur verwenden können, um die Unterschiede zu sehen.

Referenzen

• WHATWG-Spezifikation
• MDN Dokumentation
• Caniuse
• Chrome Platform Status (Chromium Ticket #244688)