真正支持 spellcheck 的元素有三类：input[type="text"]、input[type="search"]、textarea；contenteditable="true" 的任意元素也支持；而 div、p、span 等默认不可编辑元素即使设 spellcheck="true" 也无效。

spellcheck 不对所有 HTML 元素有效，它只在“可编辑文本内容”的元素上起作用；对 <div>、<p>、<span> 这类默认不可编辑的元素，即使加了 spellcheck="true" 也无效果。

哪些元素真正支持 spellcheck？

只有三类原生可编辑元素默认响应 spellcheck 属性：

• <input type="text">、<input type="search">、<input type="password">（但实际中浏览器通常忽略 type="password" 的拼写检查）
• <textarea> —— 完全支持，且多行文本下波浪线标记稳定
• 设置了 contenteditable="true" 的任意元素（如 <div contenteditable="true">），此时 spellcheck 才真正生效

注意：type="email"、type="url"、type="number" 等输入类型虽可编辑，但浏览器普遍不执行拼写检查 —— 不是 bug，是规范行为。

为什么 <div> 加 spellcheck 没反应？

因为 spellcheck 是全局属性，但它只在“浏览器认为该元素承载用户可编辑文本”的前提下才触发检查逻辑。普通 <div> 默认 contenteditable="false"，所以：

• <div spellcheck="true">hello</div> → 无波浪线、无校验
• <div contenteditable="true" spellcheck="true">hello</div> → 正常标红拼错词
• <div contenteditable="true" spellcheck="false">hello</div> → 即使拼错也不提示

别试图靠 spellcheck 控制静态文案的校验 —— 它不是语义校验工具，只服务于编辑态文本。

常见误用：把 spellcheck 当作“禁用输入纠错”的万能开关

很多人在表单里给 <input type="tel"> 或 <input type="number"> 加 spellcheck="false"，以为能关掉干扰，其实：

• 这些类型本就不触发拼写检查，加了也白加
• 真正需要 spellcheck="false" 的是 type="text" 类型的密码框、验证码、代码片段输入框
• 若想彻底屏蔽波浪线，优先用 CSS：input { text-decoration: none; } 无效；必须靠 spellcheck="false" 配合语义正确的 type

最易被忽略的一点：父元素设置 spellcheck="false" 会继承给子元素，但子元素显式设为 spellcheck="true" 可覆盖 —— 这个继承链在富文本编辑器嵌套结构中容易引发意外失效。