L'attribut universelautocorrect est un attributénuméré qui contrôle si la correction automatique du texte éditable est activée pour les erreurs d'orthographe et/ou de ponctuation.

Le comportement précis de la correction automatique, y compris les mots qui sont substitués, dépend de l'agent utilisateur et des services fournis par l'appareil sous‑jacent. Par exemple, sur macOS, un agent utilisateur peut s'appuyer surtexte et ponctuation de remplacement enregistrés^(angl.). D'autres appareils et navigateurs peuvent adopter une approche différente.

La correction automatique concerne les éléments de texte éditables :

• les éléments HTML<input>, à l'exception des typespassword,email eturl, qui ne prennent pas en charge la correction automatique.
• les éléments HTML<textarea>.
• tout élément ayant l'attribut HTMLcontenteditable défini.

La correction automatique est activée par défaut sur les éléments éditables, sauf à l'intérieur d'un élément<form>, où la valeur par défaut peut être héritée du formulaire. La définition explicite de l'attribut remplace la valeur par défaut.

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'étatoff :password,email eturl.

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

Lorsque l'élément est imbriqué dans un<form>, les éléments suivants héritent de la valeur par défaut deautocorrect 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'attributautocorrect.

HTML

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

<label for="vegetable">Un légume&nbsp;: </label><input name="vegetable" type="text" autocorrect="on" /><label for="fruit">Un fruit&nbsp;: </label><input 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'attributautocorrect.

HTML

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

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

<button>Réinitialiser</button><label for="username">Nom&nbsp;: </label><input name="username" type="text" autocorrect="off" /><label for="bio">Biographie&nbsp;: </label><textarea name="bio"></textarea>

<pre></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 siautocorrect 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 lesattributs universels
• L'attributspellcheck