HTMLElement.autocapitalize — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.autocapitalize

Beschreibung

Die Eigenschaft autocapitalize spiegelt das gleichnamige HTML-Attribut wider. Sie teilt dem Browser bzw. dem Betriebssystem mit, ob Buchstaben bei der Eingabe automatisch großgeschrieben werden sollen. Das betrifft <input>, <textarea> und Elemente mit contenteditable. Der Wert ist ein Hinweis an den Browser. Er gilt nur für Eingabemethoden wie virtuelle Tastaturen auf Smartphones und Tablets oder die Spracheingabe. Auf einer physischen Tastatur ändert er nichts.

Erlaubte Werte sind:

"off" oder "none": keine automatische Großschreibung
"on" oder "sentences": der erste Buchstabe jedes Satzes wird großgeschrieben
"words": der erste Buchstabe jedes Wortes wird großgeschrieben
"characters": alle Buchstaben werden großgeschrieben

Typische Einsatzfälle sind:

Namensfelder: "words"
Kennzeichen oder Gutscheincodes: "characters"
Benutzernamen, Codes oder Suchbegriffe, bei denen die Großschreibung stört: "off"

Setzt ein Element keinen eigenen Wert, übernimmt es den Wert seines Formulars (<form>). Beim Lesen liefert die Eigenschaft immer die normalisierte Form: "none" statt "off", "sentences" statt "on", eine leere Zeichenkette, wenn kein Wert gesetzt ist.

Parameter

Name	Typ	Default	Beschreibung
$value	"off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| ""	"" (kein Wert gesetzt, Verhalten wird vererbt bzw. vom Browser bestimmt)	Neuer Wert beim Setzen. Unbekannte Werte werden als Attribut gespeichert, beim Lesen aber normalisiert, in der Regel zu `"sentences"`.

Rückgabewert

Typ

string

Beschreibung

Der normalisierte Wert: "none", "sentences", "words", "characters" oder "", wenn kein Wert gesetzt ist.

Beispiele

Wert lesen und setzen: Normalisierung beim Lesen

const input = document.createElement('input');
console.log(JSON.stringify(input.autocapitalize));

input.autocapitalize = 'off';
console.log(input.autocapitalize);          // normalisiert
console.log(input.getAttribute('autocapitalize'));

input.autocapitalize = 'on';
console.log(input.autocapitalize);

"" none off sentences

Formularfelder passend konfigurieren

// <input id="name"> <input id="kennzeichen"> <input id="benutzer">
const config = {
  name: 'words',          // Max Mustermann
  kennzeichen: 'characters', // B-AB 1234
  benutzer: 'none'        // keine Großschreibung bei Logins
};

for (const [id, mode] of Object.entries(config)) {
  const el = document.getElementById(id);
  if (el) el.autocapitalize = mode;
}

console.log(document.getElementById('benutzer')?.autocapitalize);

none

Vererbung vom Formular und Feature-Erkennung

// <form id="login" autocapitalize="off"><input id="user"></form>
const form = document.getElementById('login');
const user = document.getElementById('user');

if ('autocapitalize' in HTMLElement.prototype) {
  // Das Feld selbst hat keinen Wert, verwendet aber den des Formulars
  console.log('Formular:', form.autocapitalize);
  console.log('Feld:', JSON.stringify(user.autocapitalize));
} else {
  console.log('autocapitalize wird nicht unterstützt');
}

Formular: none Feld: ""

// Wichtig · Fallstricke

Nur ein Hinweis: Die Eigenschaft ändert nicht den eingegebenen Wert. Auf Desktop-Rechnern mit physischer Tastatur hat sie meist keine Wirkung. Muss ein Wert zwingend großgeschrieben sein, etwa ein Kennzeichen, normalisiere ihn zusätzlich selbst, z. B. mit value.toUpperCase(), und prüfe ihn auf dem Server.
Keine Wirkung bei bestimmten Eingabetypen: Für type="url", type="email" und type="password" wird der Wert ignoriert. Dort findet grundsätzlich keine automatische Großschreibung statt.
Kompatibilität: Safari auf iOS unterstützt das Attribut schon lange. Chrome unterstützt die DOM-Eigenschaft seit Version 43, Firefox seit Version 111. In älteren Browsern hilft ersatzweise setAttribute('autocapitalize', …), das ohne Fehler ignoriert wird.
Nicht verwechseln: autocapitalize ist unabhängig von autocomplete und autocorrect. Bei Login-Feldern empfiehlt sich meist die Kombination autocapitalize="none", autocorrect="off" und spellcheck="false".
CSS nutzen: Mit CSS text-transform ändert sich nur die Darstellung, nicht der Wert. Das ist keine Alternative zu dieser Eigenschaft.

Siehe auch

HTMLElement HTMLElement.inputMode HTMLElement.spellcheck HTMLElement.contentEditable HTMLInputElement.autocomplete HTMLElement.enterKeyHint HTMLTableSectionElement.vAlign