Signatur
Beschreibung
Die Eigenschaft spellcheck spiegelt das globale HTML-Attribut spellcheck wider. Sie gibt dem Browser einen Hinweis, ob er den Inhalt eines editierbaren Elements auf Rechtschreibung (und eventuell Grammatik) prüfen und Fehler z. B. rot unterkringeln soll. Wirksam ist sie nur bei Elementen, die der Nutzer bearbeiten kann: <textarea>, textartige <input>-Felder und Elemente mit contenteditable.
Beim Lesen liefert die Eigenschaft true oder false. Ist das Attribut nicht gesetzt, wird der Standardwert des Browsers berechnet. Dieser hängt vom Elementtyp, vom Wert beim Elternelement (das Attribut wird vererbt) und von den Benutzereinstellungen ab. Beim Schreiben setzt die Eigenschaft das Attribut auf "true" oder "false".
Typische Einsatzfälle: die Prüfung in Feldern für Code, Benutzernamen, E-Mail-Adressen, Produktnummern oder Fachbegriffe abschalten, wo rote Unterstreichungen nur stören. Umgekehrt kann man sie in Texteditoren gezielt einschalten oder sie per Schalter umschaltbar machen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | boolean | browserabhängig (bei Textfeldern meist true) | Beim Setzen: true aktiviert, false deaktiviert die Rechtschreibprüfung. Andere Werte werden in einen booleschen Wert umgewandelt. |
Rückgabewert
true, wenn die Rechtschreibprüfung für das Element angefordert ist, sonst false. Das sagt aber nichts darüber aus, ob der Browser tatsächlich prüft.Beispiele
Prüfung für ein Code-Eingabefeld abschalten
const editor = document.createElement('textarea');
editor.placeholder = 'JavaScript-Code hier eingeben …';
// Keine roten Unterstreichungen bei Variablennamen
editor.spellcheck = false;
document.body.append(editor);
console.log(editor.spellcheck);
console.log(editor.getAttribute('spellcheck'));Rechtschreibprüfung per Checkbox umschalten
const text = document.querySelector('#artikel'); // <div contenteditable="true" id="artikel">
const toggle = document.querySelector('#pruefung'); // <input type="checkbox" id="pruefung">
toggle.checked = text.spellcheck;
toggle.addEventListener('change', () => {
text.spellcheck = toggle.checked;
// Kurz den Fokus neu setzen, damit der Browser die Markierungen aktualisiert
text.blur();
text.focus();
console.log(`Rechtschreibprüfung: ${text.spellcheck ? 'an' : 'aus'}`);
});Vererbung vom Elternelement
const form = document.createElement('form');
form.spellcheck = false; // setzt spellcheck="false" am Formular
const input = document.createElement('input');
input.type = 'text';
form.append(input);
document.body.append(form);
// Ohne eigenes Attribut übernimmt das Feld den Wert des Vorfahren
console.log(input.hasAttribute('spellcheck'));
console.log(input.spellcheck);// Wichtig · Fallstricke
- Nur ein Hinweis: Der Browser darf den Wert ignorieren, etwa wenn der Nutzer die Rechtschreibprüfung global abgeschaltet hat. Aus
truefolgt nicht, dass tatsächlich geprüft wird. - Nach einer Änderung aktualisieren manche Browser (v. a. Chromium) die Markierungen bei bereits vorhandenem Text erst, wenn der Text bearbeitet oder das Element neu fokussiert wird.
- Auf nicht editierbaren Elementen hat die Eigenschaft keine sichtbare Wirkung. Bei
input type="password"und ähnlichen Feldern prüfen Browser grundsätzlich nicht. - Datenschutz: Erweiterte Rechtschreibprüfungen (z. B. „Erweiterte Rechtschreibprüfung“ in Chrome, Edge Editor) schicken eingegebenen Text unter Umständen an Server. Für sensible Felder wie Kontonummern oder Zugangsdaten sollte man daher
spellcheck = falsesetzen. - Auf Mobilgeräten wirkt sich die Eigenschaft oft auch auf die Autokorrektur aus. Zusätzlich helfen
autocorrectundautocapitalize. - Kompatibilität: wird von allen modernen Browsern unterstützt. Welche Elemente standardmäßig geprüft werden, unterscheidet sich aber je nach Browser.