autocorrect

Mögliche Werte sind:

on oder "" (der leere String)

Aktiviert die automatische Korrektur von Rechtschreib- und Zeichensetzungsfehlern.

off

Deaktiviert die automatische Korrektur von bearbeitbarem Text.

Die <input>-Elementtypen, die keine Autokorrektur unterstützen, haben immer den Zustand off: password, email und url.

Bei allen anderen bearbeitbaren Elementen wird das Setzen eines anderen Wertes als der oben aufgeführten immer als on behandelt. Der Standardwert für Elemente, die nicht innerhalb eines <form> verschachtelt sind, ist on.

Wenn sie in einem <form> verschachtelt sind, erben die folgenden Elemente ihren Standardwert für autocorrect vom Formular, sofern dieser gesetzt wurde: <button>, <fieldset>, <input>, <output>, <select>, und <textarea>.

Dieses Beispiel zeigt die grundlegende Nutzung des autocorrect-Attributs.

HTML

Wir fügen zwei <input>-Textfelder mit unterschiedlichen Werten für ihre autocorrect-Attribute ein:

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

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

Ergebnisse

Geben Sie fehlerhaften Text in die Textfelder für Obst und Gemüse oben ein. Wenn Autokorrektur von Ihrem Browser unterstützt wird und das zugrunde liegende Gerät eine passende Ersetzung bereitstellt, sollte ein Tippfehler in der Gemüseeingabe automatisch korrigiert werden. Tippfehler im Obstfeld sollten jedoch nicht korrigiert werden.

Dieses Beispiel zeigt, wie Sie die Autokorrektur mithilfe des autocorrect-Attributs aktivieren und deaktivieren können.

HTML

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

Das "username"-Element hat autocorrect="off" gesetzt, da eine Autokorrektur bei Namen störend wäre! Die Bio hat keinen Wert für autocorrect angegeben, was bedeutet, dass es aktiviert ist (wir hätten jeden anderen Wert außer off setzen können).

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

<pre id="log"></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, ob autocorrect unterstützt wird, indem überprüft wird, ob es im Prototyp vorhanden ist. Ist es nicht vorhanden, wird dies protokolliert. Ist es vorhanden, wird der Wert der autocorrect-Eigenschaft für jedes der Texteingabeelemente protokolliert.

Ein Klick-Handler wird für den Button hinzugefügt, der es erlaubt, 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 Bereich unter den Eingabefeldern "Biography" und "Name" anzeigen, dass sie für Eingaben im Feld "Biography" aktiviert ist, aber nicht für das Feld "Name".

Geben Sie fehlerhaften Text in die Textfelder für name und biography ein. Wenn das Gerät einen Ersatz für das eingegebene Wort hat, wird dieser verwendet, um den Text nur im Eingabefeld "Biography" automatisch zu korrigieren.