Automatische Großschreibung für Mobilgeräte

Paul Kinlan

Das mag wie die unspektakulärste Funktion überhaupt aussehen, aber ich halte sie für wichtig, weil niemand gerne auf dem Smartphone tippt. Sie hassen es, ich hasse es. In Chrome für Android (vor Chrome 43 – Beta ab April 2015) hat ein Entwickler nur wenig Kontrolle darüber, wie der Browser dem Nutzer bei der Eingabe von Text helfen kann. Wenn Sie heute auf einem Gerät tippen, sieht das möglicherweise so aus:

Beachten Sie, dass alles in Kleinbuchstaben geschrieben ist, mit Ausnahme einiger Werte, die von Android als Name erkannt wurden.

Apple hat in HTMLInputElement und HTMLTextAreaElement das Attribut autocapitalize in iOS 5 eingeführt. Damit kann der Seitenautor angeben, wie der Browser die virtuelle Tastatur für einen Nutzer darstellen soll, um die Texteingabe zu optimieren. In der einfachsten Form könnten Sie angeben, dass in einem Textfeld automatisch der erste Buchstabe jedes neuen Satzes großgeschrieben werden soll.

Ab Chrome 43 wird das Attribut autocapitalize sowohl für HTMLInputElement als auch für HTMLTextAreaElement unterstützt. So können Sie das Verhalten der automatischen Großschreibung der virtuellen Tastatur steuern und an Safari unter iOS anpassen.

autocapitalize wird nur auf HTMLInputElements angewendet, deren type-Attribut auf type="text", type="search", type="url", type="tel", type="email" oder type="password" festgelegt ist. Standardmäßig wird die automatische Großschreibung nicht verwendet.

Hier ein einfaches Beispiel, mit dem Sie Sätze in einem Textbereich automatisch großschreiben lassen können:

<textarea autocapitalize="sentences">

Welche Werte kann „autocapitalize“ annehmen?

In der folgenden Tabelle sind die verschiedenen Status aufgeführt, in denen sich ein Eingabeelement befinden kann:

Status Keywords
<input>
<input autocapitalize=off> 		Keine Großschreibung Keine [Standard]
deaktiviert
<input autocapitalize=characters> Großschreibung von Zeichen Zeichen
<input autocapitalize=words> Großschreibung von Wörtern Wörter
<input autocapitalize=sentences> Großschreibung von Sätzen Sätze

Für HTMLInputElement ist der Standardwert für ungültige Werte Sentences Capitalization, wenn der Typ des Elements type=text oder type=search ist. Andernfalls ist er No Capitalization.

  • <input autocapitalize="simon"> wäre ein Textfeld mit Großschreibung von Sätzen.
  • <input type="email" autocapitalize="simon"> wäre ein Textfeld mit Keine Großschreibung.
  • <input> wäre ein Textfeld mit Keine Großschreibung.

Für HTMLTextAreaElement ist der Standardwert für ungültige Werte Sentences Capitalization (Groß- und Kleinschreibung von Sätzen). Dies ist eine Änderung gegenüber dem Standardverhalten.

  • <textarea autocapitalize="terry"></textarea> wäre ein Textbereich mit Sentences Capitalization.
  • <textarea></textarea> wäre ein Textbereich mit Großschreibung am Satzbeginn.
  • <textarea autocapitalize="none"></textarea> wäre ein Textbereich mit Keine Großschreibung.

Für HTMLFormElement haben wir uns entschieden, das Attribut nicht zu implementieren, da es auf Seiten heutzutage nur selten verwendet wird. Wenn es verwendet wird, dient es meist dazu, die automatische Großschreibung für das gesamte Formular zu deaktivieren:

<form autocapitalize=off><input></form>

Das ist ungewöhnlich, da der Standardstatus für HTMLInputElement No Capitalization ist.

Warum verwenden Sie diese Funktion anstelle von inputmode?

inputmode soll unter anderem dieselbe Art von Problem lösen. Es fehlten jedoch Browserimplementierungen. Unseres Wissens nach hat nur Firefox OS eine Implementierung und sie hat das Präfix „x-inputmode“. Außerdem wird sie im Web nur sehr selten verwendet. Andererseits wird autocapitalize bereits auf Millionen von Seiten auf Hunderttausenden von Websites verwendet.

Wann sollte ich diese Funktion verwenden?

Dies ist keine vollständige Liste der Fälle, in denen Sie autocapitalize verwenden sollten. Es gibt jedoch eine Reihe von Stellen, an denen es sehr hilfreich ist, dem Nutzer bei der Eingabe von Text zu helfen:

  • Verwenden Sie autocapitalization=words, wenn Sie
    • Namen von Personen (Hinweis: Nicht alle Namen folgen dieser Regel, aber die meisten westlichen Namen werden automatisch wie erwartet großgeschrieben)
    • Namen der Unternehmen
    • Adressen
  • Verwenden Sie autocapitalization=characters, wenn Sie Folgendes erwarten:
    • US-Bundesstaaten
    • Britische Postleitzahlen
  • Verwenden Sie sentences für Eingabeelemente, wenn Sie Inhalte erwarten, die in normaler Absatzform eingegeben werden, z. B. ein Blogpost.
  • Verwenden Sie none für TextAreas, wenn Sie Inhalte erwarten, die nicht beeinflusst werden sollen, z. B. bei der Eingabe von Code.
  • Wenn Sie keine Hinweise wünschen, fügen Sie „autocapitalize“ nicht hinzu.