Activer/Désactiver le correcteur auto. sur un input/textarea

Que ce soit dans un but éducatif, ou que ce soit lié à une fonctionnalité spécifique, il est parfois utile de pouvoir activer ou désactiver la correction orthographique et grammatical dans les formulaires de vos pages web !

Il est également bon de savoir que le comportement du correcteur orthographique est entièrement lié au navigateur en lui-même, tant sur son efficacité, que son apparition.

Le comportement général est que la correction est active par défaut sur un alors qu'elle est désactivée pour un <input>.</p> </blockquote> <p>Mais voici comment l'activer/désactiver grâce à un simple attribut "spellcheck" :</p> <pre><code> <input type="text" spellcheck="true"/> <!-- ou --> <textarea spellcheck="false"></textarea> </code></pre> <p>À noter que l'attribut "spellcheck" est actuellement <strong>entièrement compatible avec <a href="https://caniuse.com/?search=spellcheck" target="_blank">seulement 36,65% des navigateurs</a></strong>. Les navigateurs mobiles ignorent parfois la valeur spellcheck="false".</p> <p>Retrouvez plus d'informations sur l'attribut dans <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#spellcheck" target="_blank">la documentation du Mozilla Developer Network</a> !</strong></p> <blockquote> <p>J'espère que l'article vous aura été utile, et à bientôt sur le blog !</p> </blockquote> </div><hr data-v-3ae37eb3><p data-v-3ae37eb3><a href="https://unsplash.com/@towfiqu999999?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" data-v-3ae37eb3>Towfiqu barbhuiya sur Unsplash</a></p></div><div class="alert success" data-v-3ae37eb3 data-v-cfb49af2><!--[--><span class="flex-1" data-v-3ae37eb3>Vous avez terminé l'article ?</span><!----><button class="btn btn-light-outline btn-small" data-v-3ae37eb3><span data-v-3ae37eb3>Marquer comme lu</span><img src="/_nuxt/check.f8d81680.svg" class="icon-right" alt="" data-v-3ae37eb3></button><!--]--></div><div class="card card-undefined comment-box" data-v-3ae37eb3 data-v-6fb4858c data-v-a9e7e761><!--[--><form class="new-comment-form" data-v-6fb4858c><p class="title size-xl title-undefined" data-v-6fb4858c data-v-b3cf58e7><img src="/_nuxt/comment.ee8b7aac.svg" data-v-b3cf58e7>Commentaires (0)<!--[--><!--]--></p><!----><textarea required aria-required="true" minlength="2" pattern="[a-z]{4,8}" title="Votre commentaire" disabled placeholder="Laisser un commentaire..." data-v-6fb4858c>

Connectez-vous pour laisser un commentaire

Envoyer

Aucun commentaire pour l'instant