Benutzerfreundliche numerische Eingaben mit `inputmode`

0
35

Formulare sind oft ein Alptraum auf mobile. Wir können den Prozess so schmerzfrei wie möglich durch das reagieren auf den Kontext. Eingabefelder, die erwarten, dass numerische Werte sollten eine numerische UI. Bringen, eine Nummer-Tastatur auf kleinen Bildschirmen ist einfach auf den meisten Plattformen — verwenden Sie einfach ein <input type=”Zahl”>.

Diese große Taste numerische Tastatur finger-freundlich und wird helfen, verhindern, dass Benutzer Prellen aus dem Formular in frustration. Jedoch, type=”number” nicht angemessen ist, für alle zahlen.

Auf (den meisten) größere Bildschirme, Anzahl Eingänge kommen mit einem inkrementierer/decrementer-Taste. Es ist ein nützliches UI, die wir kostenlos erhalten standardmäßig. Es macht jedoch diese Art der Eingabe ist völlig ungeeignet für eine Kreditkarte, zum Beispiel.

Die Standard-Benutzeroberfläche für die Anzahl Eingänge sieht so etwas in allen desktop-Browsern

Die Spezifikation macht dies deutlich.

Geben Sie=Anzahl Staates ist nicht geeignet für Eingang, der zufällig nur aus Ziffern bestehen, aber ist das nicht genaugenommen eine Zahl. Zum Beispiel, es wäre unangemessen, Kreditkartennummern oder US postal codes. Eine einfache Weise zu bestimmen, ob der Gebrauch von Typ=Zahl ist zu überlegen, ob es Sinn machen würde für die input-regler haben eine spinbox-Schnittstelle (z.B. mit “up” und “down” Pfeile). Immer eine Kreditkartennummer falsch von 1 in der letzten Stelle ist nicht ein kleiner Fehler, es ist so falsch wie immer jede Ziffer falsch. So würde es keinen Sinn machen für den Benutzer, wählen Sie eine Kreditkarte Zahl mit “up” und “down” – Tasten. Wenn eine spinbox-Schnittstelle ist nicht geeignet, Typ=text wohl die richtige Wahl (vielleicht mit ein pattern-Attribut).

Es ist leicht zu verstecken die up-und down-buttons mit CSS:

input[type=”number”] {
-moz-appearance: textfield;
}
input[type=”number”]::-webkit-inner-spin-button,
input[type=”number”]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

Es ist wichtig zu beachten , dass dies nicht der einzige Unterschied zwischen einer Zahl und text-Eingabe. Sie sollten auf jeden Fall Folgen die spec in diesem Punkt! Einige ältere Browser entfernen führender Nullen für die Anzahl Eingänge, das wäre ein großes problem für den US-ZIP-codes. Die oft nützlich, maxlength-Attribut wird ignoriert Anzahl Eingänge.

ja ja ja! <input type=number> kann sterben schließlich den feurigen Tod, den es verdient!

— Monica Dinculescu (@notwaldorf) März 13, 2018

Warum würde jemand nicht mögen, so ein sinnvoller Beitrag?

Die Antwort kommt auf die Validierung und die Verwendung der input für die falsche Sache. Die Anzahl Eingang führt input-Bereinigung standardmäßig. Wenn ein Benutzer etwas, dass ist keine gültige Zahl, wird der Wert gleich einer leeren string — unabhängig davon, was der Benutzer auf dem Bildschirm sehen.

Dieser input sanitization können Reise-Entwickler, und es gibt keine Möglichkeit, es zu deaktivieren. Wenn Sie zulassen möchten, dass die Eingabe ist keine gültige Zahl, nicht die Verwendung von type=”number”.

Anzahl Eingabe in Chrome. Dies könnte der zulässige Eingabebereich für Ihren Fall, aber es ist illegitim in den Augen der Anzahl Eingang.

var numberinput = document.querySelector(‘input[type=”number”]’)
numberinput.Wert //””

Dies könnte nicht so sein, wie Sie es intuitiv erwarten würde. Allerdings, wenn Sie Folgen Sie den spec und verwenden Sie nur zahlen für, was es ist entworfen, für die — tatsächlichen zahlen—, ist dieses Verhalten unproblematisch.

Anzahl Eingabe-Alternativen

iOS-Lösung: Verwendung der “pattern” – Attribut, ein Text-Input

Auf iOS-Geräten, die mit dem pattern-Attribut mit dem Wert [0-9]* öffnet die numerische Tastatur. Dies funktioniert nur mit genau diesem Muster — Sie können keine zusätzlichen Zeichen.

<label for=”creditcard”>credit card number:</label> <input pattern=”[0-9]*” type=”text” name=”Kreditkarte”>

iOS mit Attribut “pattern”

Bedenken Sie, dass ein iPhone nicht, damit der Benutzer-switch-Tastatur-Typ auf, wenn Sie diese Tastatur wird angezeigt. Stellen Sie sicher, diese sind die einzigen Tasten, die Sie brauchen, um füllen Sie die Eingabe korrekt.

Wenn Sie wollen, um eine Tastatur der großen numerischen Tasten auf iOS, müssen Sie die pattern-Attribut auch auf die Anzahl Eingänge. Andernfalls erhalten Sie kleine und finger-freundliche Schaltflächen:

iOS-Tastatur für <input type=”number”>

Eine Bessere Lösung: `inputmode`

inputmode wurde ein WHATWG-spec für ein paar Jahre, und wurde schließlich umgesetzt von Chrome ab der version 66:

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 Keine 20 Keine Keine Keine

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Keine Keine Keine Keine Keine Keine

Für die große Unterstützung möglich, es kann kombiniert werden mit dem pattern-Attribut für iOS:

<label for=”creditcard”>credit card number:</label> <input inputmode=”numeric” pattern=”[0-9]*” type=”text” name=”Kreditkarte”>

Dies gibt Entwicklern die volle Kontrolle über die mobile Benutzeroberfläche ohne extra Gepäck. Es macht die UI-finger-freundlich, während Sie vielseitiger als das pattern-Attribut, wie können wir damit alle Zeichen, die wir mögen. Es steuert eine Sache und eine Sache nur. inputmode ist eine tolle Lösung für jene Fälle, wenn es unangemessen ist zu verwenden type=”number”.

Einige Leute würden noch weiter gehen und Graben type=”number” ganz, wenn inputmode hat besser zu unterstützen. Ich bin nicht davon überzeugt, das ist klug, aber type=”number” können problematisch sein.

wenn (numberInput.Gültigkeit.valueMissing) {
errorMessage.textContent = “Feld darf nicht leer sein”
}

Im Gegensatz zum menschlichen Auge, das Feld ist leer…

Wenn Sie wollen, ausdrücklich warnen vor leeren Anzahl Eingänge, die Sie verwenden müssen:

wenn (numberInput.Gültigkeit.valueMissing && !numberInput.Gültigkeit.badInput) {
errorMessage.textContent = “Feld darf nicht leer sein”
}

Laut Google-Nutzer verzichten Einkäufe doppelt so Häufig auf mobile im Vergleich zu desktop. Verkäufe auf Handys-Konto für nur ein Drittel der ausgefüllten online-Einkäufe. Klar die Leute nicht tolerieren Fummelei durch schlecht gestaltete Formulare und stach auf die kleine Eingänge. Dateneingabe muss mühelos sein. Während die browser-Unterstützung ist derzeit niedrig, sind wir wirklich nur warten auf mobile Browser. Desktop-Unterstützung ist weitgehend irrelevant. Die input-Elemente eingeführt, die von HTML5 sind toll, aber Sie vermissen einige Grenzfälle. Dies kann einige Lücken zu schließen.