Attribut HTML universel : autocorrect

Valeurs

Les valeurs possibles sont :

on ou "" (la chaîne vide)

Activer la correction automatique des fautes d'orthographe et de ponctuation.

off

Désactiver la correction automatique du texte éditable.

Les types d'élément <input> qui ne prennent pas en charge la correction automatique ont toujours l'état off : password, email et url.

Pour tous les autres éléments éditables, toute valeur autre que celles listées ci‑dessus est toujours traitée comme on. La valeur par défaut pour les éléments qui ne sont pas imbriqués dans un <form> est on.

Lorsque l'élément est imbriqué dans un <form>, les éléments suivants héritent de la valeur par défaut de autocorrect du formulaire si celle‑ci a été définie : <button>, <fieldset>, <input>, <output>, <select> et <textarea>.

Exemples

Exemple simple

Cet exemple montre l'utilisation de base de l'attribut autocorrect.

HTML

On inclut deux éléments <input> de type texte avec des valeurs différentes pour leur attribut autocorrect :

<label for="vegetable">Un légume&nbsp;: </label>
<input id="vegetable" name="vegetable" type="text" autocorrect="on" />

<label for="fruit">Un fruit&nbsp;: </label>
<input id="fruit" name="fruit" type="text" autocorrect="off" />

Résultats

Saisissez un texte invalide dans les champs « fruit » et « légume » ci‑dessus. Si la correction automatique est prise en charge par votre navigateur et qu'un remplacement approprié est fourni par l'appareil sous‑jacent, une faute de frappe dans le champ du légume devrait être corrigée automatiquement. Les fautes de frappe ne doivent pas être corrigées dans le champ du fruit.

Activer et désactiver la correction automatique

Cet exemple montre comment activer et désactiver la correction automatique à l'aide de l'attribut autocorrect.

HTML

Le markup HTML définit un <button>, un élément <input> « nom » de type="text", un élément <textarea> « bio », et deux éléments <label>.

L'élément « username » a autocorrect="off" car corriger automatiquement un nom serait gênant ! Le champ bio ne précise pas de valeur pour autocorrect, ce qui signifie que la correction automatique est activée (on aurait pu définir n'importe quelle valeur autre que off).

<button id="reset">Réinitialiser</button>
<label for="username">Nom&nbsp;: </label>
<input id="username" name="username" type="text" autocorrect="off" />
<label for="bio">Biographie&nbsp;: </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

Le code vérifie si autocorrect est pris en charge en testant sa présence sur le prototype. S'il n'est pas présent, un message est écrit dans le journal. S'il est présent, la valeur de la propriété autocorrect pour chacun des éléments de saisie est consignées dans le journal.

Un gestionnaire d'événement est ajouté au bouton, permettant de réinitialiser le texte saisi et le journal.

const resetButton = document.querySelector("#reset");
const userNameElement = document.querySelector("#username");
const bioElement = document.querySelector("#bio");

if (!("autocorrect" in HTMLElement.prototype)) {
  log("autocorrect n'est pas pris en charge");
} else {
  log(`userNameElement.autocorrect: ${userNameElement.autocorrect}`);
  log(`bioElement.autocorrect: ${bioElement.autocorrect}`);
}

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

Résultats

Si la correction automatique est prise en charge par votre navigateur, la zone de journal située sous les champs « Biographie » et « Nom » devrait indiquer qu'elle est activée pour la biographie mais pas pour le nom.

Saisissez un texte invalide dans les champs nom et biographie. Si l'appareil propose un remplacement pour le mot saisi, celui‑ci sera utilisé pour corriger automatiquement le texte dans le champ « Biographie » (seulement).

Spécifications

Compatibilité des navigateurs

Voir aussi

• Tous les attributs universels
• L'attribut spellcheck