HTML `autocorrect` globales Attribut

Mögliche Werte sind:

on oder "" (die leere Zeichenfolge)

Aktivieren der automatischen Korrektur von Rechtschreib- und Zeichensetzungsfehlern.

off

Deaktivieren der automatischen Korrektur von bearbeitbarem Text.

Die <input> Elementtypen, die keine Autokorrektur unterstützen, haben immer den off Zustand: 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 in einem <form> verschachtelt sind, ist on.

Wenn sie in einem <form> verschachtelt sind, erben die folgenden Elemente ihren Standardwert von autocorrect vom Formular, falls dieses 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 Obst- und Gemüse-Textfelder oben ein. Wenn die Autokorrektur in Ihrem Browser unterstützt wird und es eine geeignete Ersetzung durch das zugrunde liegende Gerät gibt, sollte ein Tippfehler bei der Eingabe eines Gemüsenamens 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! Für die Bio ist kein Wert für autocorrect angegeben, was bedeutet, dass es aktiviert ist (wir hätten jeden anderen Wert als 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 er prüft, 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 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 Protokollbereich unter den "Biografie"- und "Name"-Eingaben anzeigen, dass sie für "Biografie"-Eingaben aktiviert ist, aber nicht für "Name"-Eingaben.

Geben Sie ungültigen Text in die Name- und Biografie-Textfelder ein. Wenn das Gerät einen Ersatz für das eingegebene Wort hat, wird dieser verwendet, um Text im "Biografie" Eingabefeld (nur) automatisch zu korrigieren.

• Alle globalen Attribute.
• spellcheck.