Numerische Eingaben – Ein Vergleich der Browser Standardeinstellungen

Die Spezifikation hört bewusst auf, bevor sie den Implementierungen (Browsern) vorschreibt, wie die Benutzeroberfläche zu handhaben ist. In diesem Artikel befassen wir uns speziell mit <input type="number">, und Sie werden vielleicht überrascht sein zu erfahren, dass die Spezifikation explizit besagt

Diese Spezifikation legt keine Benutzeroberfläche fest, die von den User Agents verwendet werden soll.

Sie erklärt weiter, dass verschiedene Sprachen, Kulturen und Regionen gute Gründe haben können, numerische Eingaben unterschiedlich zu behandeln. Daher sind die Browser hier auf sich allein gestellt, und vielleicht, wie nicht überraschend, gibt es recht viele unterschiedliche Ansätze für die Benutzeroberfläche. Lassen Sie uns einen Blick darauf werfen.

Der Markup

<form>
  <label for="age">Enter your age</label>
  <input type="number" id="age" name="age">
</form>

Dies erzeugt ein einfaches Formular mit einem einzigen Eingabefeld, das numerische Werte akzeptiert. Ich habe für die folgenden Demos etwas CSS für die Darstellung hinzugefügt, aber dies ist der grundlegende HTML-Markup, den wir uns ansehen.

Wie Internet Explorer damit umgeht

Internet Explorer bietet die einfachste Standarddarstellung unter den Desktop-Browsern. Das Eingabefeld sieht aus wie jedes andere Formularfeld, das Text akzeptiert. Tatsächlich trifft IE keinerlei Benutzeroberflächenentscheidungen für uns, außer der Möglichkeit, das Eingabefeld zu leeren, sobald etwas eingegeben wurde. Das ist eine praktische kleine Funktion, die andere Browser nicht bieten (obwohl sie manchmal bei type="search" Eingabefeldern zu sehen ist).

Wie Firefox damit umgeht

Firefox führt eine Benutzeroberfläche ein, die IE nicht hat: Spinner-Steuerelemente. Diese Steuerelemente enthalten Pfeile nach oben und unten, die den numerischen Wert des Feldes beim Klicken erhöhen bzw. verringern.

Das Entfernen der Steuerelemente kann mit etwas CSS mithilfe der appearance-Eigenschaft erreicht werden

/* Remove controls from Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Während dies die Steuerelemente gut entfernt, scheinen wir keine Kontrolle über deren Design zu haben.

Wie Safari damit umgeht

Firefox und Safari ähneln sich in ihrer Behandlung numerischer Eingaben. Beide enthalten Spinner-Steuerelemente und beide verzichten auf die in IE gesehene Löschfunktion.

Wir können die Steuerelemente auch aus Safari entfernen, aber anders als bei Firefox, indem wir eine Methode verwenden, die den Shadow DOM anspricht

/* Remove controls from Safari and Chrome */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0; /* Removes leftover margin */
}

Ein weiteres Element, das wir im Shadow DOM gestalten können, ist die unsichtbare Box um die Zahl

/* Adds a box around the numeric value in Safari and Chrome */
input[type=number]::-webkit-textfield-decoration-container {
  border: 1px #ccc solid;
  background: #efefef;
}

Kann nützlich sein oder auch nicht. So oder so, es ist schön, in Safari (und Chrome) etwas mehr Designflexibilität zu haben als das, was wir bisher gesehen haben.

Wie Chrome damit umgeht

Chrome liegt irgendwie im Mittelfeld. Auf den ersten Blick sehen wir ein einfaches Formularfeld. Dann, sobald der Cursor über das Feld bewegt wird, werden die gleichen Steuerelemente wie in Firefox und Safari angezeigt.

Auch hier ist es interessant und erwähnenswert, dass Firefox, Safari, Chrome und Opera entschieden haben, dass Mengensteuerungen einen ausreichenden Nutzen für die Benutzererfahrung bieten, um sie einzubauen, wo IE sie weggelassen hat. Andererseits geht Chrome den Mittelweg, indem es die Steuerelemente beim Hovern anzeigt, anstatt sie standardmäßig anzuzeigen.

Was ist, wenn wir möchten, dass Firefox sich wie Chrome verhält und die Steuerelemente beim Hovern anzeigt? Wir können die Steuerelemente wie zuvor aus Firefox entfernen und sie dann auf :hover und :focus neu anwenden

/* Remove controls from Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Re-applies the controls on :hover and :focus */
input[type="number"]:hover,
input[type="number"]:focus {
  -moz-appearance: number-input;
}

Während Chrome und Safari vielleicht nicht so ähnlich sind, wie wir erwarten, teilen sie die Möglichkeit, das Eingabefeld mithilfe der Shadow DOM-Elemente zu gestalten und zu manipulieren. Tatsächlich gelten die gleichen Techniken, die im Safari-Abschnitt behandelt werden, auch für Chrome.

Wie Opera damit umgeht

Opera verhält sich bei numerischen Eingaben genau wie Chrome. Das sollte keine Überraschung sein, da Opera dieselbe Blink-Rendering-Engine wie Chrome übernimmt. Das bedeutet, dass dieselben CSS-Tricks zum Ausblenden und Gestalten der Eingabe in Safari und Chrome auch hier bei Opera angewendet werden können.

Da Opera erst vor kurzem auf Blink aktualisiert hat, ist es interessant zu sehen, wie seine letzte Version vor dem Update, Opera 12, mit numerischen Eingaben umgeht.

Der Unterschied hier ist, wie die Steuerelemente außerhalb des Eingabefeldes schweben. Wo Firefox, Safari, Chrome und das neueste Opera die Steuerelemente direkt im Eingabefeld platzieren, hat Opera 12 sie komplett außerhalb des Feldes. Noch bemerkenswerter ist, wie Opera entschieden hat, Rahmen um die Steuerelemente zu setzen. Dies erzeugt, was wie eine vollwertige Benutzeroberfläche aussieht, komplett mit Schaltflächen, die standardmäßig die Breite des Eingabefeldes einnehmen.

Das Entfernen der Steuerelemente aus Opera ist keine leichte Aufgabe und kann nur durch Ändern des Eingabetyps zu text im HTML und striktes Beschränken des Musters akzeptierter Zeichen auf Zahlen erfolgen

<form>
  <label for="age">Enter your age</label>
  <input type="text" pattern="[0-9]*" id="age" name="age">
</form>

Ein weiterer Unterschied ist, wie die Zahl rechtsbündig ausgerichtet ist. Das erinnert irgendwie daran, wie Excel numerische Tabellenzellen automatisch nach rechts ausrichtet. Alle anderen Browser halten den Text linksbündig, sodass wir Opera mit CSS dazu zwingen können

html:not([dir="rtl"]) input {
  text-align: left;
}

Dieses Snippet durchsucht das DOM nach jeder Eingabe, die nicht von rechts nach links gesetzt ist, und erzwingt den Text nach links. Dies würde global angewendet werden, könnte aber bei Bedarf mit höherer Spezifität modifiziert werden.

Ein letztes Detail, das erwähnenswert ist, ist das Hervorheben bei :focus. Opera wendet die stärkste Formatierung an, wenn das Feld anvisiert wird, bis hin zu den Mengensteuerungen, die ihre eigenen aktiven Zustände haben, wenn sie angeklickt werden.

Wie Mobile Safari und Android damit umgehen

Mobile Safari und der Android-Browser verhalten sich im direkten Vergleich sehr ähnlich. Beide ähneln IE insofern, als sie keine direkten Steuerelemente auf dem Eingabefeld anbieten, aber sie weichen auch von IE ab, da sie keine zusätzliche Benutzeroberfläche zum Leeren des Eingabefeldes nach der Eingabe bieten. In diesem Sinne bieten die mobilen Browser die einfachste Standardimplementierung des gesamten Sets.

Diese Browser erkennen type="number" und zeigen sofort eine numerische Tastatur an, wenn das Eingabefeld den Fokus hat. Das ist ziemlich cool und eine hervorragende Erinnerung daran, dass die korrekte Angabe des type für jedes Formularfeld eine gute Praxis für eine gute Benutzererfahrung ist.

Die Ergebnisse

Hier ist eine Zusammenfassung der in diesem Beitrag behandelten Ergebnisse.

Hat es?	IE	Safari	Firefox	Chrome	Opera	iOS	Android
Spinner-Steuerelemente	Nein	Ja	Ja	Beim Hovern	Beim Hovern	Nein	Nein
Löschfunktion	Ja	Nein	Nein	Nein	Nein	Nein	Nein
Linksbündige Ausrichtung	Ja	Ja	Ja	Ja	Ja	Ja	Ja
Fokus-Styling	Beim Hovern	Ja	Ja	Ja	Ja	Nein	Nein
Tastaturbefehle	Ja	Ja	Ja	Ja	Ja	Nein	Nein
Shadow DOM-Steuerung	Nein	Ja	Nein	Ja	Ja	Nein	Nein

Fazit

Es kann frustrierend sein, wenn Browser sich unterschiedlich verhalten. Wir beschäftigen uns schon lange auf verschiedene Weise damit. So werden Hacks – äh, Tricks – entdeckt.

Das Interessante, das ein solcher Vergleich aufdeckt, ist, wie diese Unterschiede die Benutzererfahrung beeinflussen. Wenn wir ein numerisches Formularfeld erstellen und uns auf die Standardeinstellungen des Browsers für die Anzeige verlassen würden, ist es sehr gut möglich, dass zwei verschiedene Besucher der Website zwei völlig unterschiedliche Erfahrungen haben. Obwohl diese Erfahrung für sie möglicherweise auch *seitenübergreifend* konsistent ist, da dieser Benutzer wahrscheinlich bei einem Browser bleibt.

Wie stehen Sie zu diesen UI-Unterschieden? Haben Sie einen Favoriten? Haben Sie versucht, sie zu überschreiben? Was können wir hier mit JavaScript tun? Bitte teilen Sie Ihre Gedanken in den Kommentaren mit.