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-9630328d><p data-v-9630328d><a href="https://unsplash.com/@towfiqu999999?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" data-v-9630328d>Towfiqu barbhuiya sur Unsplash</a></p></div><div class="alert success" data-v-9630328d data-v-ec0efbc7><!--[--><span class="flex-1" data-v-9630328d>Vous avez terminé l'article ?</span><!----><button class="btn btn-light-outline btn-small" data-v-9630328d><span data-v-9630328d>Marquer comme lu</span><img src="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Generator:%20Adobe%20Illustrator%2019.0.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20--%3e%3csvg%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20511.985%20511.985'%20style='enable-background:new%200%200%20511.985%20511.985;'%20xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath%20d='M500.088,83.681c-15.841-15.862-41.564-15.852-57.426,0L184.205,342.148L69.332,227.276%20c-15.862-15.862-41.574-15.862-57.436,0c-15.862,15.862-15.862,41.574,0,57.436l143.585,143.585%20c7.926,7.926,18.319,11.899,28.713,11.899c10.394,0,20.797-3.963,28.723-11.899l287.171-287.181%20C515.95,125.265,515.95,99.542,500.088,83.681z'%20fill='white'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e" class="icon-right" alt="" data-v-9630328d></button><!--]--></div><div class="card card-undefined comment-box" data-v-9630328d data-v-55c152fd data-v-a9e7e761><!--[--><form class="new-comment-form" data-v-55c152fd><p class="title size-xl title-undefined" data-v-55c152fd data-v-b3cf58e7><img src="data:image/svg+xml,%3csvg%20id='Capa_1'%20enable-background='new%200%200%20512%20512'%20height='512'%20viewBox='0%200%20512%20512'%20width='512'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m179.972%2092.823h152.055c98.966%200%20179.972%2081.053%20179.972%20180.14v7.804c0%2099.087-81.007%20180.14-179.972%20180.14h-152.055-35.948c-3.855%200-3.417-.146-6.833%201.608l-71.983%2037.034c-3.855%201.432-5.724.351-5.519-3.595l4.176-76.932c.088-.614.234-.702-.175-1.052-38.897-33.117-63.69-82.398-63.69-137.203v-7.804c0-99.087%2080.977-180.14%20179.972-180.14z'%20fill='%238dcafc'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m424.978%2046.611-105.128%20221.354%2029.786%2027.417%2038.022%204.852%20105.127-221.354z'%20fill='%23fb8627'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m420.101%2056.9%2067.807%2032.269%2015.302-32.24c5.548-11.692-.496-26.306-13.433-32.474l-10.367-4.911-10.367-4.94c-12.936-6.167-28.092-1.637-33.641%2010.055z'%20fill='%23fe636e'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m353.842%20331.626-15.974-18.385-20.996.789-2.979%2046.036c.058%203.8%203.183%205.29%206.162%202.952z'%20fill='%239c9c9c'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m467.554%2013.933c11.944%206.547%2017.346%2020.49%2012.002%2031.743l-15.302%2032.211%2023.654%2011.283%2015.302-32.24c5.548-11.692-.496-26.306-13.433-32.474l-10.367-4.911-10.367-4.94c-.496-.234-.992-.468-1.489-.672z'%20fill='%23f92c3d'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m464.255%2077.887-100.28%20211.094%2023.683%2011.253%20100.25-211.065z'%20fill='%23f2671f'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m353.842%20331.626-23.654-11.253-14.601%2013.562-1.694%2026.131c.058%203.8%203.183%205.29%206.162%202.952z'%20fill='%23838383'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m387.658%20300.234-67.808-32.269-2.978%2046.065%2036.97%2017.596z'%20fill='%23fcd79f'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m387.658%20300.234-23.683-11.253-33.787%2031.392%2023.654%2011.253z'%20fill='%23fac574'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m240.8%2092.823c52.973%200%20100.747%2023.208%20133.775%2059.949l22.632-47.644c-20.237-7.95-42.226-12.306-65.179-12.306h-91.228z'%20fill='%238ac9fe'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20clip-rule='evenodd'%20d='m460.429%20147.043-43.131%2090.757c2.278%2011.37%203.475%2023.12%203.475%2035.163v7.804c0%2099.087-80.977%20180.14-179.972%20180.14h91.227c98.966%200%20179.972-81.053%20179.972-180.14v-7.804c0-48.871-19.711-93.388-51.571-125.92z'%20fill='%2364b9fc'%20fill-rule='evenodd'/%3e%3c/g%3e%3cg%3e%3cpath%20d='m278.705%20312.578h-167.941c-4.267%200-7.726-3.459-7.726-7.726s3.459-7.726%207.726-7.726h167.941c4.267%200%207.726%203.459%207.726%207.726s-3.459%207.726-7.726%207.726z'%20fill='%23f8f6f6'/%3e%3c/g%3e%3cg%3e%3cpath%20d='m313.893%20367.793h-203.129c-4.267%200-7.726-3.459-7.726-7.726s3.459-7.726%207.726-7.726h203.129c4.267%200%207.726%203.459%207.726%207.726%200%204.266-3.459%207.726-7.726%207.726z'%20fill='%23f8f6f6'/%3e%3c/g%3e%3cg%3e%3cpath%20d='m278.705%20257.365h-167.941c-4.267%200-7.726-3.459-7.726-7.726s3.459-7.726%207.726-7.726h167.941c4.267%200%207.726%203.459%207.726%207.726%200%204.266-3.459%207.726-7.726%207.726z'%20fill='%23f8f6f6'/%3e%3c/g%3e%3cg%3e%3cpath%20d='m212.328%20202.15h-101.564c-4.267%200-7.726-3.459-7.726-7.726s3.459-7.726%207.726-7.726h101.565c4.267%200%207.726%203.459%207.726%207.726s-3.459%207.726-7.727%207.726z'%20fill='%23f8f6f6'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e" 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-55c152fd>

Connectez-vous pour laisser un commentaire

Envoyer

Aucun commentaire pour l'instant