支持 spellcheck 属性并实际生效的元素包括：①input（仅text、search、url、tel、email类型）；②textarea；③设置contenteditable="true"的元素（如div、p、span）。
哪些 HTML 元素支持 spellcheck 属性
spellcheck 是布尔属性，但不是所有元素都默认响应它。真正能触发浏览器拼写检查的，只有可编辑内容的元素——也就是 contenteditable 为 true 的元素，或原生表单控件中支持文本输入的类型。
实际生效的常见元素包括：
-
input（仅限type="text"、"search"、"url"、"tel"、"email"；"password"和"hidden"不支持） textarea- 任意设置了
contenteditable="true"的元素（如div、p、span）
像 div（无 contenteditable）、img、button 这类不可编辑的元素，即使写了 spellcheck="true"，浏览器也直接忽略。
spellcheck 的取值和默认行为
它的合法值只有 true、false 和空字符串（等价于 true）。不写该属性时，行为由元素类型决定：
-
input和textarea默认为spellcheck="true"（但部分浏览器对type="email"或"tel"会自动禁用） - 带
contenteditable的元素默认为spellcheck="false"（这是容易踩坑的地方：很多人加了contenteditable却没开拼写检查）
所以显式声明更可靠：<div contenteditable spellcheck="true"> 比只写 <code>contenteditable 更稳妥。
为什么开了 spellcheck="true" 却没红线？
常见原因不是代码写错，而是环境或配置问题：
- 系统级拼写检查未启用：macOS 需在「系统设置 → 键盘 → 文本输入 → 编辑」中勾选“在网页文本框中检查拼写”；Windows 则依赖 Edge/Chrome 的语言设置是否包含对应词典
- 当前输入法处于中文/日文等非拉丁语系模式时，部分浏览器（如 Chrome）会跳过拼写检查
- 某些企业策略或浏览器扩展（如 Grammarly）会接管并屏蔽原生拼写下划线
-
input中若设了autocomplete="off"或autocapitalize="none"，个别旧版 Safari 会连带抑制拼写检查
调试建议：临时换一个纯英文 textarea + spellcheck="true"，输入 helo 看是否出现红色波浪线——排除代码问题后，再查系统或浏览器设置。
React/Vue 等框架中怎么安全设置？
框架会把 spellcheck 当作普通 prop 处理，但注意大小写和布尔逻辑：
- React 中必须用小写
spellcheck（不是spellCheck），且传布尔值：<textarea spellcheck="{true}"></textarea>；传字符串"true"可能被序列化为spellcheck="true"，但某些 SSR 场景下不一致 - Vue 模板中直接写
spellcheck="true"即可；若用绑定语法，需:spellcheck="true"（注意冒号） - 不要用
setAttribute('spellcheck', 'true')动态操作——它可能不触发浏览器重绘拼写状态；优先改 DOM 属性elem.spellcheck = true
特别提醒：contenteditable 元素在 React 中受控难度高，如果同时需要拼写检查和富文本编辑，优先考虑 textarea + 样式模拟，而非强行用 div[contenteditable]。
