HTML autocorrect globales Attribut

Mögliche Werte sind:

on oder "" (die leere Zeichenfolge)

Aktiviert die automatische Korrektur von Rechtschreib- und Interpunktionsfehlern.

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.

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 ein <form> verschachtelt sind, erben die folgenden Elemente ihren Standardwert von autocorrect vom Formular, wenn es gesetzt wurde: <button>, <fieldset>, <input>, <output>, <select> und <textarea>.

Dieses Beispiel zeigt 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 oben aufgeführten Eingabefelder für Obst und Gemüse ein. Wenn die automatische Korrektur in Ihrem Browser unterstützt wird und es eine geeignete Ersetzung durch das zugrunde liegende Gerät gibt, sollte ein Tippfehler in einem Gemüsenamen automatisch korrigiert werden. Tippfehler sollten im Feld für den Obstnamen 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 das automatische Korrigieren eines Namens störend wäre! Die Biografie gibt keinen Wert für autocorrect an, was bedeutet, dass sie aktiviert ist (wir könnten jeden Wert außer off gesetzt haben).

<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. Falls es nicht vorhanden ist, wird dies protokolliert. Falls es vorhanden ist, wird der Wert der autocorrect-Eigenschaft für jedes der Texteintrags-Elemente protokolliert.

Ein Klick-Handler wird für den Button hinzugefügt, der es Ihnen ermöglicht, den eingegebenen Text und die Protokollierung 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

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

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

• Alle globalen Attribute.
• spellcheck.