autocorrect
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das autocorrect
-globale Attribut ist ein aufgezähltes Attribut, das steuert, ob die automatische Korrektur von bearbeitbarem Text für Rechtschreib- und/oder Interpunktionsfehler aktiviert ist.
Das spezifische Verhalten der Autokorrektur, einschließlich der Worte, die ersetzt werden, hängt vom Benutzer-Agent und den Diensten ab, die das zugrunde liegende Gerät bereitstellt. Zum Beispiel könnte ein Benutzer-Agent auf macOS auf registrierten Ersatztext und Satzzeichen zurückgreifen. Andere Geräte und Browser können einen anderen Ansatz verwenden.
Die Autokorrektur ist relevant für bearbeitbare Textelemente:
<input>
-Elemente, mit Ausnahme vonpassword
,email
undurl
, 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 Standardwert.
Wert
Mögliche Werte sind:
on
oder""
(die leere Zeichenkette)-
Aktiviert die automatische Korrektur von Rechtschreib- und Interpunktionsfehlern.
off
-
Deaktiviert die automatische Korrektur von bearbeitbarem Text.
Die Typen des <input>
-Elements, die die Autokorrektur nicht unterstützen, haben immer den Zustand off
: password
, email
und url
.
Für alle anderen bearbeitbaren Elemente wird das Festlegen eines anderen Wertes als der oben aufgeführten immer als on
behandelt.
Der Standardwert für Elemente, die sich nicht innerhalb eines <form>
befinden, ist on
.
Wenn sich ein Element in einem <form>
befindet, erben folgende Elemente ihren Standardwert für autocorrect
vom Formular, falls dieser 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:
<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 Eingabefelder für Obst und Gemüse oben ein. Wenn die Autokorrektur von Ihrem Browser unterstützt wird und ein entsprechender Ersatz durch das zugrunde liegende Gerät bereitgestellt wird, sollte ein Tippfehler in einer Gemüseeingabe automatisch korrigiert werden. Tippfehler sollten nicht im Eingabefeld für Obstnamen korrigiert werden.
Aktivieren und Deaktivieren der Autokorrektur
In diesem Beispiel wird gezeigt, wie man die Autokorrektur mit dem autocorrect
-Attribut ein- und ausschalten kann.
HTML
Das HTML-Markup definiert einen <button>
, ein "Name"-<input>
-Element des Typs type="text"
, ein "Bio"-<textarea>
-Element und zwei <label>
-Elemente.
Das "username"-Element hat autocorrect="off"
gesetzt, da die Autokorrektur eines Namens störend wäre!
Die Bio 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>
JavaScript
Der Code überprüft, ob autocorrect
unterstützt wird, indem geprüft wird, 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 Texteingabeelement protokolliert.
Ein Klick-Handler wird für den Button hinzugefügt, mit dem Sie den eingegebenen Text und das Protokoll zurücksetzen können.
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 Eingabefeldern "Biografie" und "Name" anzeigen, dass sie für Eingaben unter "Biografie" aktiviert, aber für Eingaben unter "Name" deaktiviert ist.
Geben Sie ungültigen Text in die Eingabefelder für Namen und Biografie ein. Falls das Gerät einen Ersatz für das eingegebene Wort hat, wird dieser verwendet, um den Text nur im Eingabefeld "Biografie" automatisch zu korrigieren.
Spezifikationen
Specification |
---|
HTML # attr-autocorrect |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
autocorrect |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
Siehe auch
- Alle globalen Attribute.
spellcheck
.