Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels
„Alles, was Sie jemals über den Eingabemodus wissen wollten“ von Christian Oliff.
Anmerkung des Übersetzers: Der ursprüngliche Titel des Artikels „Alles, was Sie schon immer über den Eingabemodus wissen wollten“ wurde in „Funktionen des Eingabemodus-Attributs für mobile Betriebssysteme und Browser“ geändert, da der zweite Titel das Wesentliche genauer wiedergibt.
Das globale Eingabemodus-Attribut teilt Browsern für Geräte mit einer Bildschirmtastatur mit, welche Option angezeigt werden soll, wenn der Benutzer ein Eingabe- oder Textbereichselement auswählt.
<input type="text" inputmode="" /> <textarea inputmode="" />
Im Gegensatz zum Ändern des Formulartyps ändert der Eingabemodus nicht die Art und Weise, wie der Browser Eingaben interpretiert. Er gibt dem Browser Anweisungen, welche Tastatur angezeigt werden soll.
Das Eingabemodus-Attribut hat eine lange Geschichte, wurde jedoch erst kürzlich von führenden mobilen Browsern übernommen: Safari für iOS und Chrome für Android. Zuvor wurde es 2012 in Firefox für Android implementiert, aber später, nach einigen Monaten, wurde es gelöscht (obwohl es immer noch über das Flag verfügbar ist). Nach fast sechs Jahren hat Chrome für Android diese Eigenschaft erstellt, und mit der neuesten Version von iOS 12.2 unterstützt Safari sie auch.
Die Unterstützung von Browserattributen kann hier eingesehen
werden . Die Zahlen geben die Browserversion an.
Bevor wir zum Endergebnis kommen, sollten wir bedenken, dass der WHATWG-Lebensstandard eine Dokumentation zum Eingabemodus bietet, während die W3C 5.2-Spezifikation diese nicht mehr enthält. Da die WHATWG das Attribut dokumentiert und die Browser an seiner Unterstützung arbeiten, werden wir die technischen Eigenschaften der WHATWG als Standard betrachten.
Der Eingabemodus nimmt mehrere Werte an. Schauen wir sie uns einzeln an.
#Keine
<input type="text" inputmode="none" />
Beginnen wir damit, denn vielleicht brauchen wir keine Tastatur. Wenn Sie inputmode = "none" verwenden, wird die Tastatur in Chrome für Android nicht angezeigt. iOS 12.2 zeigt standardmäßig seine alphanumerische Tastatur an, daher könnte das Merkmal keine in diesem Fall für iOS so etwas wie ein Zurücksetzen sein.
#Numerisch
<input type="text" inputmode="numeric" />
Dies ist wahrscheinlich einer der häufigsten Eingabemoduswerte, da er ideal für Eingabefelder ist, für die nur Zahlen erforderlich sind, z. B. PIN-Codes, Postleitzahlen, Kreditkartennummern usw. Die Verwendung von numerisch mit type = ”text” kann sinnvoller sein als die Umschaltung der Eingabe auf type = ”number”, da inputmode = ”numeric” mit den Attributen maxlength, minlength und pattern verwendet werden kann, wodurch es für verschiedene Gelegenheiten vielseitiger wird.
Ich habe oft Websites gesehen, die type = "tel" in einer Fremdsprache verwendeten, um einen Ziffernblock anzuzeigen. Dies wird als Problemumgehung angesehen, ist jedoch semantisch falsch.
Denken Sie daran, dass der Eingabemodus das Musterattribut unterstützt. Wir können dem Eingang für den gleichen Effekt pattern = ”\ d *” hinzufügen. Verwenden Sie diese Option, wenn Sie sicher sind, dass für die Eingabe nur Zahlen eingegeben werden dürfen, da Android (im Gegensatz zu iOS) dem Benutzer nicht den Zugriff auf die Tastatur mit Buchstaben ermöglicht, was versehentlich die Eingabe gültiger Daten beeinträchtigen könnte.
#Tel
<input type="text" inputmode="tel" />
Die Eingabe einer Telefonnummer über die alphanumerische Standardtastatur kann schwierig sein. Auf der Telefontastatur steht jede Taste mit einer Nummer (außer 1 und 0) für drei Buchstaben (z. B. 2 steht für A, B und C), die sich auf derselben Taste befinden. Die alphanumerische Tastatur verweist nicht auf diese Buchstaben. Daher erfordert das Dekodieren einer Telefonnummer, die Buchstaben enthält (z. B. 1-800-COLLECT), zusätzliche Ressourcen.
Die Verwendung des Eingabemodus beim Umschalten auf Tel zeigt eine Standardtastatur an, die Tasten für Zahlen von 0 bis 9, Nummernzeichen und Sternchen enthält. Außerdem haben wir alphabetische mnemonische Zeichen (zum Beispiel ABC).
#Dezimal
<input type="text" inputmode="decimal" />
Das Eingabemodusfeld mit Umschalten auf Dezimalstelle führt zu kleinen Änderungen für iOS, wobei die Tastatur genauso aussieht wie im Fall von Tel, aber die Zeichen + * # durch einen Dezimalpunkt ersetzt werden. Android verwendet nur die Zehnertastatur.
#E-Mail
<input type="text" inputmode="email" />
Ich bin sicher, dass Sie ein Formular ausgefüllt haben, für das eine E-Mail-Adresse eingegeben werden musste, wodurch die Tastatur gezwungen wurde, nur um auf das @ -Symbol zuzugreifen. Dies ist nicht tödlich, aber sicherlich nicht zu bequem. Hier bietet sich der E-Mail-Wert an. Es werden das @ -Symbol und der Dezimalpunkt hinzugefügt.
Eine solche Tastatur kann für diejenigen nützlich sein, die einen Benutzernamen auf Twitter eingeben müssen, da @ die Hauptfigur zur Identifizierung von Benutzern in diesem sozialen Netzwerk ist. Ein weiterer Grund für die Verwendung kann sein, dass Sie über ein eigenes Skript zum Überprüfen von E-Mails verfügen und die im Browser integrierte Validierungsfunktion nicht verwenden möchten.
#URL
<input type="text" inputmode="url" />
Ein URL-Wert erleichtert das Hinzufügen einer Domain-Namenserweiterung (z. B. .com) durch Drücken einer einzelnen Schaltfläche. Es gibt auch Schaltflächen, die üblicherweise für Webadressen verwendet werden, z. B. die Zeichen (.) und (/). Die auf der Tastatur angezeigte Erweiterung wird der Benutzereingabe hinzugefügt.
Eine solche Tastatur kann nützlich sein, um Benutzern anzuzeigen, dass Ihr Eingabefeld Domainnamen (site.com) sowie vollständig qualifizierte Domainadressen (https://site.com) akzeptiert.
Verwenden Sie type = ”url”, wenn Ihr Eingabefeld eine Validierung der eingegebenen Zeichen erfordert.
#Suche
<input type="text" inputmode="search" />
Dieser Wert zeigt die blaue Go-Schaltfläche unter iOS und die grüne Enter-Taste unter Android anstelle von Return an. Wie Sie vielleicht anhand des Namens erraten haben, wird die Suche für Suchformulare verwendet und bietet einen Schlüssel zum Erstellen einer Abfrage.
Wenn Sie in iOS Suchen anstelle von Eingabe und unter Android anstelle des grünen Pfeils das Lupensymbol anzeigen möchten, verwenden Sie type = ”search”.
# Was müssen Sie noch wissen?
- Chromium-basierte Browser unter Android wie Microsoft Edge, Brave und Opera verhalten sich genauso wie Chrome im Eingabemodus.
- Ich habe die Tastaturen auf dem iPad aus Gründen der Kürze nicht berührt. Sie ähneln dem iPhone, enthalten jedoch nur mehr Tasten. Gleiches gilt für Android-Tablets, mit Ausnahme von Tastaturen von Drittanbietern, bei denen es sich möglicherweise um ein separates Thema handelt, das hervorgehoben werden sollte.
- Ursprünglich hatte die vorgeschlagene Spezifikation Kana- und Katakana-Bedeutungen für japanische Eingaben, sie wurden jedoch nie in einem Browser implementiert und daher eingestellt.
- Der lateinische Name war ursprünglich auch einer der Eingabemoduswerte und wurde entfernt. Interessanterweise wird der Benutzername über der Tastatur angezeigt, wenn Sie ihn jetzt in iOS Safari verwenden.