spellcheck 属性仅对 contenteditable="true" 的可编辑元素生效，且行为因浏览器、输入法和系统词典而异；不可用于文档级检查或自动化校验，需结合后端校验与第三方库实现可靠拼写提示。
spellcheck 属性在注释区域是否真能起作用
不能直接依赖 spellcheck 实现“文档级拼写检查”——它只对可编辑的文本节点生效，且行为高度依赖浏览器实现和输入法状态。比如在 <div contenteditable="true"> 里加 <code>spellcheck="true"，Chrome 可能标出“recieve”，但 Safari 可能完全不触发，Edge 则可能仅在聚焦时扫描当前行。
常见错误现象：spellcheck="true" 加在只读 <p></p> 或禁用 contenteditable 的容器上，控制台无报错，但右键菜单里根本不出“拼写建议”选项。
- 必须确保元素同时满足：可编辑（
contenteditable="true"）、非禁用（disabled属性不存在）、有焦点或已输入文本 - 移动端 Safari 默认忽略
spellcheck，即使contenteditable开启，也不会下划红线 - 某些输入法（如中文拼音输入法）处于“中文模式”时，会主动屏蔽拼写检查，需切换到英文输入状态才生效
contenteditable + spellcheck 的最小可行组合
在线文档注释区通常用 <div contenteditable="true"> 实现，这是唯一能稳定激活 <code>spellcheck 的载体。注意不要用 <textarea></textarea> —— 它虽原生支持拼写检查，但无法嵌入富文本（如高亮、@用户），也不便于后续做语法高亮或 Markdown 渲染。
正确写法示例：
<div contenteditable="true" spellcheck="true" role="textbox" aria-label="评论输入框">这里输入注释...</div>
-
role="textbox"和aria-label是必要辅助属性，否则屏幕阅读器可能忽略该区域，影响无障碍访问 - 避免给父容器设
spellcheck="false"，CSS 继承不会影响，但 DOM 层级上父级spellcheck="false"会强制禁用所有子元素的拼写检查（Chrome/Firefox 均如此） - 若注释区需限制长度，用 JavaScript 监听
input事件截断，不要用maxlength（<div contenteditable> 不支持该属性） <h3>为什么 spellcheck 标红后无法 programmatically 获取错误词</h3> <p>浏览器不提供 API 获取被 <code>spellcheck标红的具体单词或位置。你看到的红色波浪线是渲染层私有行为，DOM 中查不到对应标记，getSelection()也拿不到“拼写错误”元数据。这意味着：无法自动高亮错误词、无法统计错词数量、无法对接自定义词典校验。如果业务需要这些能力，必须绕过原生
spellcheck，改用第三方库（如typo-js或 WebAssembly 版Hunspell）配合input事件实时分词校验。- 原生
spellcheck仅用于“提示用户”，不可用于自动化流程 - 监听
contextmenu事件可捕获右键弹出的拼写建议菜单项，但无法预知哪些词会被建议、也无法拦截修正动作 - 部分浏览器（如 Firefox）允许通过
document.execCommand('spelling')触发手动检查，但该 API 已废弃，且无返回值
生产环境注释区的实用取舍建议
真实项目中，多数团队最终放弃依赖
spellcheck做核心拼写保障，转而采用“轻量提示 + 后端兜底”策略：前端用spellcheck="true"提供基础体验，后端保存前调用POST /api/spellcheck做全量校验并返回错误位置，再用 CSS 在对应字符范围加data-misspelled属性实现可控高亮。- 若注释区要支持多语言，原生
spellcheck依赖系统词典，无法指定语言（lang属性仅作参考，Chrome 忽略它）；必须用带词典加载能力的 JS 库 - 性能敏感场景（如千条评论流式渲染），禁用
spellcheck更稳妥——某些版本 Chrome 在大量contenteditable元素上开启拼写检查会导致输入卡顿 - 测试时务必在 Windows + Chrome、macOS + Safari、iOS Safari 三端验证，同一段文本在不同环境下的标红表现可能完全不同
拼写检查不是开关一开就完事的事，它藏在 focus 状态、输入法模式、系统词典、甚至字体渲染细节里。真正上线前，得拿着真实用户常输的错词（比如 “definately”、“seperate”）挨个点过去看波浪线有没有出来。
- 原生
