拼写检查仅对可编辑元素生效，如contenteditable的div、textarea及部分input类型；spellcheck="false"常因autocorrect等属性覆盖而失效；验证需观察波浪线和右键菜单；移动端依赖系统键盘设置，稳定方案是用webassembly拼写库。

拼写检查默认是开启的，但实际生效取决于元素类型、浏览器行为和配套属性是否冲突。

哪些 HTML 元素支持 spellcheck 属性

只有可编辑的元素才真正响应 spellcheck：比如 contenteditable="true" 的 div、textarea 和 input（仅限 type="text"、"search"、"url"、"tel"、"email"）。input type="password" 或只读 input 即使设了 spellcheck="true" 也无效。

常见误用：span、p、label 这类非编辑元素加 spellcheck 完全无作用。

spellcheck="false" 为什么有时不生效

根本原因常是其他属性在“暗中覆盖”拼写检查逻辑：

• autocorrect="off" 在 iOS Safari 中会直接禁用拼写建议（即使 spellcheck="true"）
• autocomplete="off" 虽不影响拼写，但某些浏览器（如旧版 Chrome）会连带抑制校验行为
• inputmode 设为 "numeric" 或 "tel" 时，系统键盘不触发拼写检查，spellcheck 形同虚设

要确保关闭拼写检查，必须同时设置：spellcheck="false" + autocorrect="off" + autocapitalize="none"。

如何验证 spellcheck 是否真在工作

不能只看属性是否存在，得观察实际反馈：

• 在支持的输入框中故意打错英文单词（如 recieve），看是否有红色波浪线
• 右键点击错词，检查上下文菜单里是否出现“更正为…”或“添加到字典”选项
• 注意：Chrome 和 Edge 默认对 input 启用拼写检查，但 Firefox 需用户在 about:config 中启用 layout.spellcheckDefault（值为 1）

如果没反应，优先排查是否用了 type="password" 或被 contenteditable="false" 锁死编辑状态。

移动端特别注意事项

iOS 和 Android 的原生键盘行为差异大，spellcheck 属性本身不控制键盘逻辑：

• iOS Safari 必须配合 autocorrect="on" 才可能显示拼写建议；设为 "off" 则彻底屏蔽
• Android Chrome 对 spellcheck 响应较弱，更依赖系统级拼写服务开关（用户需在系统设置中打开“拼写检查”）
• 混合应用（如 Cordova、Capacitor）中，spellcheck 可能被 WebView 配置忽略，需额外检查 WebView.setWebContentsDebuggingEnabled 等环境

真正稳定可控的方式，是放弃纯前端拼写检查，改用 WebAssembly 拼写库（如 tiny-spellchecker）做客户端校验——尤其当需要多语言、离线或自定义词典时。