autocorrect

Mögliche Werte sind:

on oder "" (der leere String)

Automatische Korrektur von Rechtschreib- und Satzzeichenfehlern aktivieren.

off

Automatische Korrektur von bearbeitbarem Text deaktivieren.

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

Für alle anderen bearbeitbaren Elemente wird jede andere als die oben aufgeführten Werte 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 den Standardwert von autocorrect vom Formular, wenn dieser gesetzt wurde: <button>, <fieldset>, <input>, <output>, <select> und <textarea>.

Dieses Beispiel demonstriert die grundlegende Verwendung des autocorrect-Attributs.

HTML

Wir fügen zwei Text-<input>-Elemente 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 ungültigen Text in die Textfelder für Früchte und Gemüse oben ein. Wenn die Autokorrektur in Ihrem Browser unterstützt wird und es eine passende Ersetzung durch das zugrunde liegende Gerät gibt, sollte ein Tippfehler im Gemüsenamen-Eingabefeld automatisch korrigiert werden. Tippfehler sollten im Fruchtnamenfeld nicht korrigiert werden.

Dieses Beispiel zeigt, wie Sie die Autokorrektur mit dem autocorrect-Attribut 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 die Autokorrektur eines Namens lästig wäre! Die Biografie gibt keinen Wert für autocorrect an, was bedeutet, dass es aktiviert ist (wir hätten jeden 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 überprüft, ob autocorrect unterstützt wird, indem überprüft wird, ob es im Prototyp vorhanden ist. Wenn es nicht vorhanden ist, wird dies protokolliert. Wenn es vorhanden ist, wird der Wert der autocorrect-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 Log 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 Logbereich unter den Eingaben "Biografie" und "Name" zeigen, dass sie für "Biografie"-Eingaben aktiviert ist, aber nicht für "Name"-Eingaben.

Geben Sie ungültigen Text in die Namens- und Biografie-Textfelder ein. Wenn das Gerät ein Ersatzwort für das eingegebene Wort hat, wird dieses verwendet, um den Text nur im "Biografie"-Eingabebereich automatisch zu korrigieren.