如何开启拼写检查？掌握生效规则是关键
浏览器通常默认启用拼写检查功能，但它能否在您当前使用的输入框中生效，则取决于一系列具体条件。元素的HTML类型、浏览器的具体实现，以及其他相关属性的优先级设置，共同决定了最终是否会出现红色波浪线提示。
哪些 HTML 元素支持 spellcheck 属性？
核心原则非常明确：只有可编辑的元素，才能响应此属性。具体包括：设置了 contenteditable="true" 的 div 元素、标准的 textarea 文本域，以及特定类型的 input 输入框（例如文本、搜索、URL、电话和邮箱类型）。相反，像 input type="password" 密码框或设置了 readonly 属性的只读输入框，即使强行添加 spellcheck="true"，浏览器也会完全忽略。
这里存在一个常见误区：许多开发者会将 spellcheck 属性错误地添加到 span、p 或 label 这类纯展示性元素上，这自然是无效的。
为什么设置了 spellcheck="false" 有时仍会生效？
明明已将属性设为 false，却依然看到拼写错误提示？问题往往出在其他具有更高优先级的“隐形”属性上。
- 在 iOS 的 Safari 浏览器中，
autocorrect="off"指令拥有极高优先级，它会直接关闭拼写建议功能，无论spellcheck的值如何设置。 autocomplete="off"属性主要控制自动填充，但在部分旧版浏览器中，它也可能连带抑制拼写校验行为。- 当
inputmode属性被设置为"numeric"（数字）或"tel"（电话）时，系统键盘通常默认不触发拼写检查，此时spellcheck属性基本失效。
因此，若想彻底禁用拼写检查，最稳妥的策略是采用“组合拳”：同时设置 spellcheck="false"、autocorrect="off" 以及 autocapitalize="none"。
如何有效验证 spellcheck 功能是否正常工作？
仅查看代码属性是不够的，必须通过实际操作来验证。以下是几种直接的验证方法：
- 在目标输入框中，故意输入一个常见的英文拼写错误（例如将
receive错拼为recieve），观察是否出现红色下划线提示。 - 在疑似错误的单词上点击鼠标右键，检查上下文菜单中是否出现“更正为…”或“添加到词典”等选项。
- 请注意浏览器间的差异：Chrome 和 Edge 默认对大多数
input框启用检查，而 Firefox 用户有时需要在地址栏输入about:config，找到并手动将layout.spellcheckDefault参数值设为 1。
如果以上迹象均未出现，首先应排查元素类型是否不支持（如密码框），或是否被 contenteditable="false" 等属性锁定了编辑状态。
移动端设备上的特殊注意事项
在手机和平板等移动设备上，情况更为复杂。iOS 和 Android 系统的原生键盘逻辑不同，spellcheck 属性本身并不直接控制键盘行为。
- 在 iOS 的 Safari 中，必须配合设置
autocorrect="on"才可能激活拼写建议；一旦设为"off"，建议功能会被完全屏蔽。 - Android 版 Chrome 浏览器对
spellcheck属性的响应较弱，其功能更依赖于用户是否在系统设置中全局开启了“拼写检查”服务。 - 在 Cordova、Capacitor 等混合应用框架中，
spellcheck属性甚至可能被 WebView 容器的配置所忽略，此时需要额外检查 WebView 的初始化设置等环境因素。
综上所述，如果您的项目对拼写检查功能的稳定性和可控性要求极高，尤其是在涉及多语言支持、离线使用或需要集成自定义词典的场景下，更可靠的解决方案或许是放弃对浏览器原生功能的完全依赖，转而采用基于 WebAssembly 的客户端拼写检查库（例如 tiny-spellchecker）。这样才能真正将功能的控制权掌握在自己手中。
