autocorrect

Mögliche Werte sind:

on oder "" (die leere Zeichenkette)

Aktiviert die automatische Korrektur von Rechtschreib- und Zeichensetzungsfehlern.

off

Deaktiviert die automatische Korrektur von bearbeitbarem Text.

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

Für alle anderen bearbeitbaren Elemente 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> eingebettet sind, ist on.

Bei Einbettung in ein <form> erben die folgenden Elemente ihren Standardwert von autocorrect vom Formular, falls 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 fehlerhaften Text in die Textfelder für Obst und Gemüse oben ein. Wenn die Autokorrektur in Ihrem Browser aktiviert ist, sollte ein Tippfehler in einem Gemüsenamen automatisch korrigiert werden, aber nicht in einem Obstnamen.

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 Typ "text", ein "bio" <textarea> Element und zwei <label> Elemente.

Das "username" Element hat autocorrect="off" gesetzt, da das Autokorrigieren eines Namens störend wäre! Die Biografie gibt keinen Wert für autocorrect an, 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 ü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, welcher 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(`userNameElement.autocorrect: ${bioElement.autocorrect}`);
}

resetButton.addEventListener("click", (e) => {
  userNameElement.value = "";
  bioElement.value = "";
});

Ergebnisse

Geben Sie fehlerhaften Text in die Textfelder für Name und Biografie unten ein. Wenn die Autokorrektur in Ihrem Browser aktiviert ist (siehe das Protokoll unten), sollte der Text in der "Biografie" automatisch korrigiert werden, aber nicht im "Name" Feld.