Automatische Großschreibung für Mobilgeräte

Paul Kinlan

Das mag wie die unscheinbarste Funktion überhaupt erscheinen, aber ich finde sie wichtig, weil niemand gerne auf einem Mobilgerät tippt: Sie hassen es, ich verabscheue es. In Chrome für Android (vor Chrome 43 – Betaversion, Stand April 2015) haben Entwickler nur wenig Kontrolle darüber, wie der Browser Nutzern beim Eingeben von Text helfen kann. Wenn Sie heute auf einem Gerät tippen, sieht das möglicherweise so aus:

Außer einigen Werten, die von Android als Name erkannt wurden, ist alles in Kleinbuchstaben.

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

Ab Chrome 43 unterstützt Chrome das Attribut autocapitalize sowohl für HTMLInputElement als auch für HTMLTextAreaElement. So können Sie das automatische Großschreiben der virtuellen Tastatur steuern und es mit Safari auf iOS in Einklang bringen.

autocapitalize gilt nur für HTMLInputElements, bei denen das type-Attribut auf einen der folgenden Werte festgelegt ist: type="text", type="search", type="url", type="tel", type="email" oder type="password". Standardmäßig wird die automatische Großschreibung nicht verwendet.

Hier ein einfaches Beispiel, mit dem Sie Sätze in einem Textfeld automatisch großschreiben lassen:

<textarea autocapitalize="sentences">

Welche Werte kann „autocapitalize“ haben?

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 Sätze großschreiben, wenn der Typ des Elements „type=text“ oder „type=search“ ist. Andernfalls ist es Keine Großschreibung.

  • <input autocapitalize="simon"> ist 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 (Groß- und Kleinschreibung von Sätzen). Das ist eine Änderung gegenüber dem Standardverhalten.

  • <textarea autocapitalize="terry"></textarea> wäre ein Textfeld mit Großschreibung von Sätzen
  • <textarea></textarea> wäre ein Textfeld mit Großschreibung am Satzbeginn.
  • <textarea autocapitalize="none"></textarea> ist ein Textfeld mit Kein Großbuchstaben.

Für HTMLFormElement haben wir uns entschieden, das Attribut nicht zu implementieren, da es heutzutage nur selten auf Seiten verwendet wird. Wenn es verwendet wird, dient es in der Regel dazu, die automatische Großschreibung im Formular vollständig zu deaktivieren:

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

Das ist seltsam, da der Standardstatus für HTMLInputElement Keine Großschreibung ist.

Warum verwenden Sie das und nicht inputmode?

inputmode soll unter anderem diese Art von Problem lösen. Es gibt jedoch keine Browserimplementierungen. Nach unserem Kenntnisstand gibt es nur eine Implementierung in Firefox OS und diese hat ein Präfix (x-inputmode). Außerdem wird es im Web nur sehr selten verwendet. autocapitalize wird hingegen bereits auf Millionen von Seiten auf Hunderttausenden von Websites verwendet.

Wann sollte ich das 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, Nutzern beim Eingeben von Text zu helfen:

  • Verwenden Sie autocapitalization=words, wenn Sie folgende Voraussetzungen erfüllen:
    • Erwartete Namen von Personen (Hinweis: Nicht alle Namen folgen dieser Regel, aber die meisten westlichen Namen werden wie erwartet automatisch 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 in normaler Absatzform erwarten, z. B. einen Blogpost.
  • Verwenden Sie none für TextAreas, wenn Inhalte erwartet werden, die nicht betroffen sein sollen, z. B. die Eingabe von Code.
  • Wenn Sie keine Vorschläge erhalten möchten, fügen Sie „autocapitalize“ nicht hinzu.