如何关闭输入框拼写检查？解决Grammarly扩展配置失效问题

基础原生配置（先排查写法错误） #

很多人配置失效的第一个原因是写错了属性名：HTML原生的拼写检查属性是全小写的spellcheck，驼峰写法spellCheck在纯HTML环境下无法被浏览器识别。
两种场景的正确写法：

• 原生HTML环境：<input spellcheck="false" />
• React/JSX环境：<input spellCheck={false} />

针对Grammarly扩展的专属禁用配置 #

Grammarly扩展会默认覆盖页面原生的spellcheck属性值，强行将其改为true，仅配置原生属性无法生效，需要添加扩展官方识别的禁用标记。
在需要禁用检查的元素上（包括input、textarea、设置了contenteditable="true"的容器）添加以下三个属性：

<input
  type="text"
  spellcheck="false"
  data-gramm="false"
  data-gramm_editor="false"
  data-enable-grammarly="false"
/>

如果需要全局禁用整个页面的Grammarly检查，直接把这三个属性加在<html>或者<body>标签上即可，无需逐个输入框配置。

多场景兜底兼容配置 #

如果还存在其他拼写检查类扩展（比如浏览器内置高级拼写检查、其他第三方语法插件）的干扰，可以额外补充两个属性做兼容，覆盖绝大多数检查逻辑：

<input
  type="text"
  spellcheck="false"
  autocorrect="off"
  autocapitalize="off"
  data-gramm="false"
  data-gramm_editor="false"
  data-enable-grammarly="false"
/>

• autocorrect="off"：禁用浏览器和扩展自带的自动文本修正逻辑
• autocapitalize="off"：禁用自动首字母大写，避免连带触发拼写检查规则

注意：配置完成后需要刷新页面才能生效，Grammarly不会在页面已加载的状态下自动移除已经注入的检查实例。

内容的提问来源于stack exchange，提问作者TulaMaagar