Signatur
Beschreibung
Die Eigenschaft writingSuggestions spiegelt das globale HTML-Attribut writingsuggestions wider. Sie legt fest, ob der Browser beim Tippen in editierbaren Bereichen eigene Schreibvorschläge einblenden darf, zum Beispiel ausgegrauten Text als Wortvervollständigung (Inline-Vorhersage), der sich per Tab-Taste übernehmen lässt. Solche Vorschläge kommen vom Browser oder vom Betriebssystem, nicht von der Webseite.
Die Einstellung wird vererbt. Setzt man sie auf einem Container wie <form>, <body> oder einem <div>, gilt sie für alle Nachfahren, solange diese keinen eigenen Wert haben. Beim Lesen gibt die Eigenschaft den tatsächlich wirksamen Zustand zurück, also "true" oder "false". Auch wenn am Element selbst kein Attribut steht, bekommt man den geerbten Wert. Ohne jede Angabe gilt "true".
Abschalten lohnt sich vor allem dort, wo Vorschläge des Browsers stören oder mit eigenen Funktionen kollidieren:
- Editoren mit eigener Autovervollständigung, etwa Code-Editoren oder Chat-Eingaben mit KI-Vorschlägen,
- Felder für Codes, Kennungen, Suchbegriffe oder Fachsprache,
- Lernanwendungen und Tests, in denen niemand beim Schreiben helfen soll.
Wirksam ist die Eigenschaft nur bei editierbaren Elementen: <input> (textartige Typen), <textarea> und Elementen mit contenteditable. Rechtschreibprüfung (spellcheck), das Ausfüllen gespeicherter Formulardaten (autocomplete) und die Autokorrektur (autocorrect) sind davon nicht betroffen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value (Setter) | string | "true" (geerbt) | Neuer Wert. "false" schaltet die Vorschläge ab. "true" oder ein leerer String "" schaltet sie ein. Der Wert wird als Inhalt des Attributs writingsuggestions geschrieben. Andere Werte behandelt der Browser wie den Standardzustand, das Element erbt dann vom Elternelement. |
Rückgabewert
"true" oder "false". Ein am Elternelement gesetzter Wert wird dabei berücksichtigt.Beispiele
Schreibvorschläge für ein einzelnes Textfeld abschalten
// <textarea id="antwort"></textarea>
const textarea = document.querySelector('#antwort');
console.log(textarea.writingSuggestions); // Standard
textarea.writingSuggestions = 'false';
console.log(textarea.writingSuggestions);
console.log(textarea.getAttribute('writingsuggestions'));Vererbung über ein Formular
// <form id="quiz">
// <input id="frage1" type="text">
// <input id="frage2" type="text" writingsuggestions="true">
// </form>
const form = document.querySelector('#quiz');
form.writingSuggestions = 'false'; // gilt für alle Felder im Formular
console.log(document.querySelector('#frage1').writingSuggestions); // geerbt
console.log(document.querySelector('#frage2').writingSuggestions); // eigener Wert hat VorrangEigene Autovervollständigung in einem contenteditable-Editor
const editor = document.createElement('div');
editor.contentEditable = 'true';
editor.className = 'code-editor';
// Zuerst prüfen, ob der Browser die Eigenschaft kennt
if ('writingSuggestions' in HTMLElement.prototype) {
// Browser-Vorschläge würden die eigene Vervollständigung überlagern
editor.writingSuggestions = 'false';
} else {
// Fallback: Attribut trotzdem setzen, schadet nicht
editor.setAttribute('writingsuggestions', 'false');
}
document.body.append(editor);
console.log(editor.getAttribute('writingsuggestions'));Per Nutzereinstellung umschalten
// <input type="checkbox" id="hilfe" checked> Schreibhilfe erlauben
// <textarea id="text"></textarea>
const toggle = document.querySelector('#hilfe');
const text = document.querySelector('#text');
const sync = () => {
text.writingSuggestions = toggle.checked ? 'true' : 'false';
console.log(`Vorschläge: ${text.writingSuggestions}`);
};
toggle.addEventListener('change', sync);
sync();// Wichtig · Fallstricke
- Der Wert ist ein String, kein Boolean. Die Zuweisung
el.writingSuggestions = falsewandeltfalsezwar in den String"false"um und funktioniert daher. Beim Lesen kommt aber immer ein String zurück, undif (el.writingSuggestions)ist immer wahr, weil auch"false"ein nicht leerer String ist. Vergleiche deshalb ausdrücklich mit=== "true". - Nur ein Hinweis an den Browser: Ob und welche Vorschläge erscheinen, hängt von Browser, Betriebssystem und Nutzereinstellungen ab. Die Eigenschaft kann Vorschläge unterdrücken, aber nicht erzwingen.
- Gelesen wird der wirksame Wert: Das Ergebnis kann
"false"sein, obwohl am Element kein Attribut steht, weil es den Wert von einem Vorfahren erbt. Ob ein Wert direkt am Element gesetzt wurde, zeigtgetAttribute('writingsuggestions'). - Browser-Unterstützung: Verfügbar in Chromium-Browsern ab Version 124 und in Safari ab Version 18. Firefox unterstützt die Eigenschaft bisher nicht. Wo sie fehlt, ist die Zuweisung wirkungslos. Die Unterstützung prüfst du mit
'writingSuggestions' in HTMLElement.prototype. - Unabhängig davon sind
spellcheck(Rechtschreibprüfung),autocomplete(Ausfüllen gespeicherter Daten) undautocorrect. Für Formularfelder, in denen der Browser gar nicht eingreifen soll, müssen diese Attribute zusätzlich gesetzt werden.