Alles, was Sie schon Immer Wissen Wollten inputmode

0
53

Der inputmode global-Attribut stellt einen Hinweis auf die Browser für Geräte mit onscreen-Tastaturen helfen bei der Entscheidung, welche Tastatur, um anzuzeigen, wenn ein Benutzer ausgewählt hat, jedem input oder textarea element.

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

Im Gegensatz zu einer änderung der Art der form, inputmode nicht ändern, wie der browser interpretiert den input — es weist den browser an, mit der die Tastatur zur Anzeige.

Die inputmode-Attribut hat eine lange Geschichte, aber erst vor kurzem verabschiedet worden von den beiden großen mobile Browser: Safari für iOS und Chrome für Android. Zuvor wurde umgesetzt in Firefox für Android-der Weg zurück in 2012, und dann entfernt einige Monate später (obwohl es noch über ein flag).

Fast sechs Jahre später, Chrome für Android implementiert, die Funktion — und mit der jüngsten Version von iOS 12.2, Safari unterstützt jetzt auch.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
66 53 20 Keine 75 Keine

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
12.2 Keine Keine 67 74 Keine

Aber bevor wir gehen tief in die ins und outs der das Attribut der Ansicht, dass die WHATWG Lebensstandard bietet inputmode Dokumentation, während die 5.2 W3C-spec nicht mehr listet es in seinem Inhalt, was darauf schließen lässt, halten Sie für veraltet. Gegeben, dass die WHATWG hat, dokumentiert es und Browsern gearbeitet haben, in Richtung Unterstützung, wir gehen davon aus WHATWG-Spezifikationen sind standard.

inputmode akzeptiert eine Reihe von Werten. Wir gehen durch Sie eins nach dem anderen.

Keiner

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

Wir beginnen hier, weil es ist sehr möglich, dass wir nicht wollen, jede Art von Tastatur auf eine Eingabe. Mit inputmode=none, wird nicht angezeigt, die eine Tastatur überhaupt auf Chrome für Android. iOS 12.2 wird noch zu zeigen sein Standard-alphanumerische Tastatur, so dass die Angabe von none werden könnte, sozusagen ein reset für iOS in dieser Hinsicht. Unabhängig davon, ist es nicht beabsichtigt ist für die Inhalte, macht seine eigene Steuerung mit der Tastatur.

Numerische

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

Dieser ist wohl einer der häufigsten inputmode Werte in der wildnis, weil es ideal für Eingänge, erfordern zahlen, aber keine Buchstaben — Dinge wie PIN-Eingabe, zip-codes, Kreditkartennummern, etc. Mit dem numerischen Wert mit einem input type=”text” eigentlich mehr Sinn machen, als das setzen der input type=”number” allein, weil, im Gegensatz zu einer numerischen Eingabe, inputmode=”numeric” kann verwendet werden, mit maxlength, minlength-und pattern-Attribute, so dass es noch vielseitiger für unterschiedliche Anwendungsfälle.

Der numerische Wert, der auf Chrome Android (Links) und iOS 12.2 (rechts)

Ich habe schon oft gesehen, Websites mit type=tel auf einer Eingabe zur Anzeige einer numerischen Tastatur ein, und checkt wie ein workaround, aber nicht semantisch korrekt. Wenn das bums Sie heraus, denken Sie daran, dass inputmode unterstützt Muster, wir können hinzufügen, pattern=”d*”, um die Eingabe für den gleichen Effekt. Das heißt, verwenden Sie diese Funktion nur, wenn Sie sicher sind, dass der Eingang sollte nur erlauben, numerische Eingabe, weil Android im Gegensatz zu iOS) nicht erlauben, den Benutzer zu ändern, um die Tastatur zu verwenden Buchstaben, die versehentlich verhindern, dass Benutzer von der Abgabe gültigen Daten.

Tel

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

Die Eingabe einer Telefonnummer über eine standard-alphanumerische Tastatur kann ein Schmerz sein. Für eine jede Nummer auf der Telefon-Tastatur (außer die 1 und die 0) steht für drei Buchstaben (z.B. 2 bedeutet, A, B und C) angezeigt werden, mit der Anzahl. Die alphanumerische Tastatur nicht auf diese Buchstaben, also die Dekodierung einer Telefon-Nummer mit Buchstaben (z.B. 1-800-COLLECT) mehr mentale Kraft.

Den tel Wert auf Chrome Android (Links) und iOS 12.2 (rechts)

Mit inputmode-set mit tel wird eine standard-Suche Telefon-Tastatur, einschließlich der Tasten für die Ziffern 0 bis 9, dem Raute (#) Zeichen und das Sternchen (*) Zeichen. Plus, wir bekommen die alphabetische mnemonische Bezeichnungen (z.B. ABC).

Dezimal

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

Der decimal-Wert auf Chrome Android (Links) und iOS 12.2 (rechts)

Ein inputmode legen Sie den decimal-Wert führt zu einer subtilen Veränderung in iOS, wo die Tastatur erscheint genau das gleiche wie die tel-Wert, aber ersetzt Sie die + * Taste#, mit einer einfachen dezimal (.). Auf der anderen Seite, hat dies keine Auswirkung auf Android, das wird einfach über die numerische Tastatur.

E-Mail

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

Ich bin sicher, dass Sie (und zumindest jemand, den Sie kennen) ausgefüllt hat ein Formular, das fragt nach einer E-Mail-Adresse nur, um Ihnen swap-Tastaturen Zugriff auf das @ – Zeichen. Es ist nicht lebensbedrohlich oder so, aber sicherlich nicht eine großartige user experience.

Das ist, wo die E-Mail-Wertes kommt. Es bringt das @ – Zeichen in den Kampf, als auch als Dezimalzahl (.) Charakter.

Die E-Mail Wert auf Chrome Android (Links) und iOS 12.2 (rechts)

Dies könnte auch eine nützliche Tastatur, um dem Benutzer anzuzeigen, müssen Sie einen Benutzernamen, da@ ist ein zentraler Charakter für die Identifizierung von Benutzern. Allerdings, die E-Mail-Adresse Vorschläge, die iOS-display oberhalb der Tastatur kann zu Verwechslungen führen.

Ein anderer Anwendungsfall könnte sein, wenn Sie Ihre eigene E-Mail-Validierung Skript und nicht möchten, verwenden Sie die Browser integrierten E-Mail-Validierung.

URL

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

Der url-Wert, der auf Chrome Android (Links) und iOS 12.2 (rechts)

Der url-Wert bietet eine praktische Verknüpfung für den Benutzer anfügen TLDs (z.B. .com-oder .co.uk) mit einer einzigen Taste, sowie die Tasten, die üblicherweise in web-Adressen, wie der Punkt (.) und der Schrägstrich (/) Zeichen. Die genaue TLD angezeigt, auf der Tastatur ist gebunden an das Gebietsschema des Benutzers.

Dies könnte auch eine nützliche Tastatur, um dem Benutzer anzuzeigen, ob Ihre Eingabe akzeptiert domain-Namen (z.B. css-tricks.com) als auch vollständige URIs (z.B. https://css-tricks.com). Verwenden Sie type=”url” statt, wenn Sie Ihre Eingabe erfordert die Validierung der Eingabe.

Suche

<input type=”text” inputmode=”Suche” />

Der Suche Wert auf Chrome Android (Links) und iOS 12.2 (rechts)

Dies zeigt eine Blaue Go-Taste auf iOS und ein grünes Enter-Taste auf Android, sowohl im Ort, wo Rückkehr. Wie Sie vielleicht schon erraten haben, indem Sie den Namen des Werts, ist die Suchfunktion nützlich für die Suche nach Formen, die Bereitstellung, Abgabe-Taste, um eine Abfrage machen.

Wenn Sie möchten, um showSearch anstatt der Eingabe auf iOS-und ein Lupen-Symbol auf Android anstelle des grünen Pfeils, verwenden Sie type=search statt.

Andere Dinge, die Sie oughta wissen

  • Chromium-basierte Browser auf Android — wie Microsoft Edge, Mutig und Opera teilen sich die gleiche inputmode Verhalten wie Chrome.
  • Ich habe nicht enthalten details von Tastaturen auf dem iPad für die der Kürze halber. Es ist meistens die gleiche wie iPhone, sondern umfasst weitere Tasten. Gleiches gilt für die Android tablets, das speichern von Drittanbieter-Tastaturen, die möglicherweise ein anderes Thema Wert abdecken.
  • Die ursprüngliche vorgeschlagene Skillung hatte die Werte kana und katakana für Japanisch-Eingang, aber Sie wurden nie umgesetzt, die von jedem browser und habe seither entfernt sich von der spec.
  • Latein-Namen war auch einer der Werte der original-Spezifikation und ist seitdem entfernt worden. Interessanterweise, wenn es jetzt auf Safari für iOS, zeigt es den Namen des Benutzers als Anregung oberhalb der Tastatur.

    Der lateinische name-Wert zeigt, dass mein name als ein ” auto-fill-Vorschlag

Demo

Oh, Sie wollen, um zu sehen, wie alle diese Eingabe-Modi für sich selbst arbeiten? Hier ist ein demo Sie können auf einem Gerät mit einem touchscreen-Tastatur um die Unterschiede zu sehen.

Referenzen

  • WHATWG-Spezifikation
  • MDN-Dokumentation
  • Caniuse
  • Chrome Plattform-Status (Chrom Ticket #244688)