Signatur
Beschreibung
Die Eigenschaft autocorrect spiegelt das HTML-Attribut autocorrect wider. Sie gibt an, ob Tippfehler in bearbeitbarem Text beim Eingeben automatisch korrigiert werden dürfen. Das betrifft <input>-Felder (z. B. type="text" und type="search"), <textarea> und Elemente mit contenteditable. Welche Korrekturen genau passieren, hängt vom Browser und vom Betriebssystem ab. Am deutlichsten merkt man das auf Touch-Tastaturen wie der von iOS.
Im HTML hat das Attribut die Werte "on" (oder ein leerer String) und "off". Die JavaScript-Eigenschaft ist dagegen ein Boolean. true setzt das Attribut auf "on", false setzt es auf "off". Beim Lesen erhältst du den tatsächlich wirksamen Zustand. Fehlt das Attribut, wird der Wert vom nächsten Vorfahren oder vom Formular übernommen, zu dem das Element gehört. Ist nirgends etwas festgelegt, ist die Autokorrektur standardmäßig eingeschaltet.
Schalte die Autokorrektur überall dort ab, wo sie Eingaben verfälschen würde: bei Benutzernamen, Produktcodes, Gutscheincodes, Eigennamen, Code-Editoren oder Suchfeldern mit Fachbegriffen. Die Rechtschreibprüfung (spellcheck) und die automatische Großschreibung (autocapitalize) sind davon unabhängig und müssen einzeln eingestellt werden.
Rückgabewert
true, wenn die Autokorrektur für das Element wirksam eingeschaltet ist, sonst false. Beim Setzen wird das Attribut autocorrect auf "on" bzw. "off" gesetzt.Beispiele
Autokorrektur für ein Benutzernamen-Feld abschalten
// HTML: <input id="username" type="text">
const username = document.querySelector('#username');
username.autocorrect = false; // Autokorrektur aus
username.autocapitalize = 'none'; // keine automatische Großschreibung
username.spellcheck = false; // keine rote Unterstreichung
console.log(username.autocorrect);
console.log(username.getAttribute('autocorrect'));
Wert von einem Formular übernehmen
// HTML:
// <form id="code-form" autocorrect="off">
// <input id="voucher" type="text">
// <textarea id="comment" autocorrect="on"></textarea>
// </form>
const voucher = document.querySelector('#voucher');
const comment = document.querySelector('#comment');
// voucher hat kein eigenes Attribut und übernimmt "off" vom Formular
console.log(voucher.autocorrect);
// comment überschreibt den Wert des Formulars
console.log(comment.autocorrect);
Code-Editor mit contenteditable und Feature-Erkennung
const editor = document.createElement('div');
editor.contentEditable = 'true';
editor.spellcheck = false;
if ('autocorrect' in HTMLElement.prototype) {
editor.autocorrect = false;
} else {
// Fallback: Attribut direkt setzen (ältere iOS-Safari werten es aus)
editor.setAttribute('autocorrect', 'off');
}
document.body.append(editor);
console.log(editor.getAttribute('autocorrect'));
Autokorrektur per Checkbox umschalten
// HTML: <textarea id="notes"></textarea>
// <label><input id="ac" type="checkbox" checked> Autokorrektur</label>
const notes = document.querySelector('#notes');
const toggle = document.querySelector('#ac');
toggle.addEventListener('change', () => {
notes.autocorrect = toggle.checked;
console.log(`Autokorrektur: ${notes.autocorrect ? 'an' : 'aus'}`);
});
// Wichtig · Fallstricke
- Browser-Unterstützung: Die Eigenschaft ist noch nicht in allen Browsern verfügbar. Safari (vor allem auf iOS) wertet das Attribut schon lange aus, die IDL-Eigenschaft gibt es erst in neueren Versionen. Firefox unterstützt sie ab Version 136. In Chromium-Browsern fehlt die Eigenschaft bislang. Prüfe die Unterstützung mit
'autocorrect' in HTMLElement.prototypeund setze notfalls das Attribut mitsetAttribute('autocorrect', 'off'). - Boolean statt String: Die Eigenschaft erwartet
trueoderfalse. Beiel.autocorrect = 'off'wird der String in einen Boolean umgewandelt. Jeder nicht leere String ergibttrue, die Autokorrektur wird also eingeschaltet. - Nicht korrigierbare Feldtypen: Bei
<input>mittype="password","email"oder"url"findet nie eine Autokorrektur statt, unabhängig vom gesetzten Wert. - Nur ein Hinweis: Das Attribut ist eine Empfehlung an den Browser. Auf Desktop-Systemen zeigt es oft keine sichtbare Wirkung, und Tastatur-Apps von Drittanbietern können es ignorieren.
- Die Eigenschaft hängt nicht mit
spellcheck(rote Unterstreichung) oderautocomplete(Vorschläge zum Ausfüllen) zusammen. Setze diese Eigenschaften bei Bedarf zusätzlich.