Automatische Großschreibung für Mobilgeräte

Kinlan

Dies mag nach der beeindruckendsten Funktion aussehen, die es gibt, aber ich denke, dass es wichtig ist, weil alle es nicht mögen, wenn sie auf einem Mobilgerät tippen: Sie hassen es, das ist mir schrecklich. In Chrome für Android (vor Chrome 43 – Beta seit April 2015) hat ein Entwickler wenig Kontrolle darüber, wie der Browser dem Nutzer bei der Texteingabe helfen kann. Wenn Sie heute auf einem Gerät tippen, könnte dies so aussehen:

Abgesehen von einigen Werten, die Android als Namen erkannt hat, ist alles kleingeschrieben.

Apple hat für HTMLInputElement und HTMLTextAreaElement in iOS 5 ein Attribut mit dem Namen auto-Capital (automatische Großschreibung) eingeführt. Damit kann der Seitenautor einen Hinweis darauf geben, wie der Browser dem Nutzer die virtuelle Tastatur anzeigen soll, um die Texteingabe für den Nutzer zu optimieren. In der einfachsten Form könnten Sie angeben, dass ein Textfeld automatisch den ersten Buchstaben jedes neuen Satzes großschreiben soll.

Ab Chrome-Version 43 unterstützt Chrome das Attribut autogross sowohl für HTMLInputElement als auch für HTMLTextAreaElement. Damit kannst du die automatische Großschreibung der Bildschirmtastatur steuern und sie auf iOS-Geräten inline mit Safari darstellen.

autoCapital gilt nur für HTMLInputElement-Werte, bei denen das Attribut type auf type="text", type="search", type="url", type="tel", type="email" oder type="password" gesetzt ist. Die Standardeinstellung ist keine automatische Großschreibung.

Hier ist ein einfaches Beispiel für die automatische Großschreibung von Sätzen in einem Textfeld:

<textarea autocapitalize="sentences">

Welche Werte sind für die automatische Großschreibung zulässig?

Die folgende Tabelle zeigt die verschiedenen Status, in denen ein Eingabeelement sein kann:

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

Für HTMLInputElement lautet der Standardwert für ungültige Werte Großschreibung von Sätzen, wenn der Typ des Elements „type=text“ oder „type=search“ ist. Andernfalls lautet der Wert Keine Großschreibung.

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

Für HTMLTextAreaElement lautet der Standardwert für ungültige Werte Großschreibung von Sätzen. Dies ist eine Änderung gegenüber der Standardeinstellung.

  • <textarea autocapitalize="terry"></textarea> wäre ein Textfeld mit der Großschreibung von Sätzen.
  • <textarea></textarea> wäre ein Textfeld mit Großschreibung des Satzes.
  • <textarea autocapitalize="none"></textarea> wäre ein Textfeld mit Keine Großschreibung.

Für HTMLFormElement haben wir uns entschieden, das Attribut nicht zu implementieren, da wir festgestellt haben, dass es derzeit selten auf Seiten verwendet wird. Wenn es jedoch verwendet wird, wird es hauptsächlich verwendet, um die automatische Großschreibung für das Formular vollständig zu deaktivieren:

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

Die obige Darstellung ist seltsam, da der Standardstatus für HTMLInputElement Keine Großschreibung lautet.

Warum verwendest du diese Funktion mehr als inputmode?

inputmode dient unter anderem dazu, dieselbe Art von Problem zu lösen. Es fehlte jedoch an Browserimplementierungen. Nach unseren Erkenntnissen verfügt nur Firefox OS über eine Implementierung mit dem Präfix (x-inputmode) - aber es wird im Web nur sehr selten genutzt. 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, wann Sie autocapitalize verwenden sollten. Es gibt jedoch einige Stellen, an denen die Unterstützung des Nutzers bei der Texteingabe einen großen Mehrwert bietet:

  • Verwenden Sie autocapitalization=words, wenn Sie
    • Erwartete Personennamen (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
    • Postleitzahlen im Vereinigten Königreich
  • Verwenden Sie sentences für Eingabeelemente, wenn Sie Inhalte erwarten, die in normaler Absatzform eingegeben werden, z. B. einen Blogpost.
  • Verwenden Sie none für TextAreas, wenn Sie Inhalte erwarten, die keine Auswirkungen haben sollen – z. B. bei der Eingabe von Code.
  • Wenn Sie keine Hinweise wünschen, fügen Sie keine automatischen Großschreibung hinzu.