Dasautocorrectglobale Attribut ist einaufgezähltes Attribut, das steuert, ob die Autokorrektur für bearbeitbaren Text bei Rechtschreib- und/oder Zeichensetzungsfehlern aktiviert ist.

Das spezifische Verhalten der Autokorrektur, einschließlich der ersetzten Wörter, hängt vom Benutzeragenten und den Diensten des zugrunde liegenden Gerätes ab.Auf macOS könnte beispielsweise ein Benutzeragent aufregistrierten Ersetzungstext und Zeichensetzung zurückgreifen.Andere Geräte und Browser können einen anderen Ansatz verwenden.

Die Autokorrektur ist relevant für bearbeitbare Textelemente:

• <input>-Elemente, mit Ausnahme vonpassword,email undurl, die keine Autokorrektur unterstützen.
• <textarea>-Elemente.
• Jedes Element, das dascontenteditable Attribut gesetzt hat.

Bearbeitbare Elemente haben standardmäßig die Autokorrektur aktiviert, außer in einem<form>-Element, wo der Standardwert möglicherweise vom Formular geerbt wird.Durch explizites Setzen des Attributs wird der Standardwert überschrieben.

Wert

Mögliche Werte sind:

on oder"" (die leere Zeichenkette)

Aktiviert die automatische Korrektur von Rechtschreib- und Zeichensetzungsfehlern.

off

Deaktiviert die automatische Korrektur für bearbeitbaren Text.

Die<input>-Elementtypen, die keine Autokorrektur unterstützen, haben immer denoff-Status:password,email undurl.

Für alle anderen bearbeitbaren Elemente wird jede andere als die oben aufgeführten Werteinstellung immer alson behandelt.Der Standardwert für Elemente, die nicht in einem<form> verschachtelt sind, iston.

Wenn sie in einem<form> verschachtelt sind, erben die folgenden Elemente ihren Standardwert vonautocorrect vom Formular, falls es gesetzt ist:<button>,<fieldset>,<input>,<output>,<select> und<textarea>.

Beispiele

Grundbeispiel

Dieses Beispiel zeigt die grundlegende Verwendung desautocorrect-Attributs.

HTML

Wir fügen zwei Text-<input>-Elemente mit unterschiedlichen Werten für ihreautocorrect-Attribute ein:

<label for="vegetable">A vegetable: </label><input name="vegetable" type="text" autocorrect="on" /><label for="fruit">A fruit: </label><input name="fruit" type="text" autocorrect="off" />

Ergebnisse

Geben Sie in die obigen Textfelder für Obst und Gemüse ungültigen Text ein.Wenn die Autokorrektur in Ihrem Browser unterstützt wird und das zugrunde liegende Gerät eine geeignete Ersetzung bereitstellt, sollte ein Tippfehler in einem Gemüsenamen automatisch korrigiert werden.Tippfehler sollten im Obstnamenfeld nicht korrigiert werden.

Aktivieren und Deaktivieren der Autokorrektur

Dieses Beispiel zeigt, wie Sie die Autokorrektur mit demautocorrect-Attribut aktivieren und deaktivieren können.

HTML

Das HTML-Markup definiert einen<button>, ein "name"-<input>-Element vomtype="text", ein "bio"-<textarea>-Element und zwei<label>-Elemente.

Das "username"-Element hatautocorrect="off" gesetzt, da das Autokorrigieren eines Namens lästig wäre!Die Bio ist nicht mit einem Wert fürautocorrect versehen, was bedeutet, dass es aktiviert ist (wir hätten jeden anderen Wert außeroff setzen können).

<button>Reset</button><label for="username">Name: </label><input name="username" type="text" autocorrect="off" /><label for="bio">Biography: </label><textarea name="bio"></textarea>

<pre></pre>

#log {  height: 75px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}button,input,textarea {  display: block;}

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

JavaScript

Der Code prüft, obautocorrect unterstützt wird, indem er überprüft, ob es im Prototyp vorhanden ist.Wenn es nicht vorhanden ist, wird dieser Umstand protokolliert.Wenn es vorhanden ist, wird der Wert derautocorrect-Eigenschaft für jedes der Texteingabeelemente protokolliert.

Ein Klick-Handler wird für den Button hinzugefügt, der es Ihnen ermöglicht, den eingegebenen Text und das Protokoll zurückzusetzen.

const resetButton = document.querySelector("#reset");const userNameElement = document.querySelector("#username");const bioElement = document.querySelector("#bio");if (!("autocorrect" in HTMLElement.prototype)) {  log("autocorrect not supported");} else {  log(`userNameElement.autocorrect: ${userNameElement.autocorrect}`);  log(`bioElement.autocorrect: ${bioElement.autocorrect}`);}resetButton.addEventListener("click", (e) => {  userNameElement.value = "";  bioElement.value = "";});

Ergebnisse

Wenn die Autokorrektur von Ihrem Browser unterstützt wird, sollte der Protokollbereich unter den "Biography"- und "Name"-Eingabefeldern anzeigen, dass sie für "Biography"-Eingaben aktiviert, aber nicht für "Name"-Eingaben aktiviert ist.

Geben Sie ungültigen Text in die Namen- und Biografie-Texteingabefelder ein.Wenn das Gerät ein Ersatzwort für das eingegebene Wort hat, wird dies verwendet, um den Text in der "Biography"-Eingabe (nur dort) automatisch zu korrigieren.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Alleglobalen Attribute.
• spellcheck.