`autocorrect` HTML-Globalattribut

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Das autocorrect Globalattribut ist ein aufgezähltes Attribut, das steuert, ob die Autokorrektur von bearbeitbarem Text für Rechtschreib- und/oder Zeichensetzungsfehler aktiviert ist.

Das spezifische Verhalten der Autokorrektur, einschließlich der ersetzten Wörter, hängt vom User-Agent und den Diensten des zugrunde liegenden Geräts ab. Zum Beispiel könnte auf macOS ein User-Agent auf registrierte Ersetzungstexte und Zeichensetzung zurückgreifen. Andere Geräte und Browser könnten einen anderen Ansatz verwenden.

Die Autokorrektur ist für bearbeitbare Textelemente relevant:

<input>-Elemente, außer password, email und url, die keine Autokorrektur unterstützen.
<textarea>-Elemente.
Jedes Element, das das contenteditable-Attribut gesetzt hat.

Bearbeitbare Elemente haben standardmäßig die Autokorrektur aktiviert, außer innerhalb eines <form>-Elements, wo der Standardwert möglicherweise vom Formular geerbt wird. Das explizite Setzen des Attributs überschreibt den Standard.

Wert

Mögliche Werte sind:

on oder "" (die leere Zeichenkette): Aktiviert automatische Korrektur von Rechtschreib- und Interpunktionsfehlern.
off: Deaktiviert die automatische Korrektur von bearbeitbarem Text.

Die <input>-Elementtypen, die die Autokorrektur nicht 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 Werteinstellung 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 von autocorrect aus dem Formular, wenn er dort gesetzt wurde: <button>, <fieldset>, <input>, <output>, <select> und <textarea>.

Beispiele

Einfaches Beispiel

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:

html

<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 das zugrunde liegende Gerät eine geeignete Ersetzung bereitstellt, sollte ein Tippfehler in einem Gemüsenamen korrigiert werden. Tippfehler sollten im Feld für den Obstspeicher nicht korrigiert werden.

Aktivieren und Deaktivieren der Autokorrektur

Dieses Beispiel zeigt, wie Sie die Autokorrektur mit dem autocorrect-Attribut aktivieren und deaktivieren können.

HTML

Das HTML-Markup definiert ein <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! Das Bio-Element gibt keinen Wert für autocorrect an, was bedeutet, dass es aktiviert ist (wir hätten jeden anderen Wert als off setzen können).

html

<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 die Schaltfläche hinzugefügt, der es 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 "Biography" und "Name" anzeigen, dass sie für "Biography"-Eingaben aktiviert, aber nicht für "Name"-Eingaben aktiviert ist.

Geben Sie ungültigen Text in die Felder für Name und Biografie ein. Wenn das Gerät eine Ersetzung für das eingegebene Wort hat, wird diese verwendet, um den Text im "Biography"-Eingabefeld (nur) zu korrigieren.