spellcheck 属性仅对可编辑元素生效，包括 textarea、文本类 input（如 text/search/url）、contenteditable 元素；对 number/email/password 输入框、select、disabled/readonly 元素无效。
spellcheck 属性在哪些元素上真正生效
不是所有带输入能力的 HTML 元素都支持 spellcheck，它只对可编辑内容起作用。浏览器实际检查拼写时，依赖的是元素是否处于“用户可编辑”状态，而不是有没有 input 或 textarea 标签。
真正生效的常见场景包括：
-
textarea元素（默认spellcheck="true"） -
input[type="text"]、input[type="search"]、input[type="url"]等文本类输入框（默认继承浏览器设置，通常为true） -
contenteditable="true"的任意元素（如<div contenteditable="true">），此时 <code>spellcheck必须显式设置才可靠无效的例子：
input[type="number"]、input[type="email"]（部分浏览器会忽略拼写检查）、select、禁用的input（disabled或readonly）——这些即使写了spellcheck="true"也基本不起作用。如何正确启用或禁用拼写检查
直接写布尔属性即可，但要注意：值不是 JavaScript 布尔字面量，而是字符串
"true"或"false"；省略该属性时行为由浏览器决定，不可靠。推荐写法：
<textarea spellcheck="true"></textarea><input type="text" spellcheck="false"><div contenteditable="true" spellcheck="true">可编辑段落</div>
常见错误：
- 写成
spellcheck={true}（React JSX 中需注意：这是 JS 表达式，实际渲染后是字符串"true"，但若用spellcheck={false}会直接删掉该属性，等价于未设置） - 在
input[type="password"]上设spellcheck="true"—— 浏览器普遍无视，出于安全考虑不检查密码字段 - 以为
spellcheck="auto"是合法值 —— 实际上只有"true"和"false"是规范支持的值，"auto"被多数浏览器当作false处理
拼写检查失效的典型原因
即使写了
spellcheck="true"，也可能看不到红色波浪线。主要干扰因素有：- 操作系统或浏览器未启用拼写检查功能（例如 macOS 的“自动拼写纠正”关闭，或 Chrome 设置里关掉了“使用拼写检查”）
- 输入语言与系统默认语言不匹配（比如页面是中文，但输入英文单词，而系统词典没加载英文）
- 元素被 CSS 设置了
user-select: none或pointer-events: none，导致浏览器无法聚焦并触发检查 - 使用了某些富文本库（如 TinyMCE、Quill）覆盖了原生编辑行为，此时
spellcheck可能被忽略，需查对应库的配置项
调试建议：先用一个裸
textarea测试，确认系统级拼写检查正常，再逐步加样式和逻辑排查。移动端与跨浏览器兼容性差异
桌面端 Chrome、Edge、Firefox 对
spellcheck支持较一致；但移动端差异大：- iOS Safari 对
spellcheck支持有限，尤其在contenteditable区域常不触发，且不显示波浪线（但可能仍提供键盘纠错建议） - Android Chrome 一般支持，但依赖系统键盘是否开启拼写建议（如 Gboard 的“拼写检查”开关）
- 微信内置浏览器（X5 内核）几乎不响应
spellcheck属性，无论怎么设都不会显示波浪线
所以不能把
spellcheck当作拼写校验的唯一手段。需要强校验时，必须配合 JavaScript 方案（如调用 WebAssembly 拼写库或后端 API）。真正起作用的永远是用户设备当前的语言设置和输入法能力，HTML 层的
spellcheck只是个提示信号，不是控制开关。 - 写成
