启用 spellcheck 属性需满足：值为 true、元素可编辑（如 textarea 或 contenteditable）、用户正在输入、浏览器已开启拼写检查功能，否则不会显示波浪线提示。
如何启用 spellcheck 属性实现基础拼写检查
HTML 原生支持拼写检查，但仅靠 spellcheck 属性本身不会自动触发——它只是告诉浏览器“这段内容允许被检查”，是否生效取决于浏览器实现、输入法状态、语言设置和元素类型。
必须满足以下条件才可能看到下划线提示：
-
spellcheck值为true（false或省略时禁用） - 元素是可编辑的：如
contenteditable="true"的<div>、<code><textarea></textarea>、<input type="text"> - 用户实际在其中输入文字（只读或 disabled 元素不触发）
- 浏览器已启用拼写检查功能（例如 Chrome 需开启 Settings → Advanced → Languages → Spell check）
示例：
<textarea spellcheck="true">Ths is a mistak.</textarea>输入时若拼错，Chrome/Firefox 通常会在
Ths 和 mistak 下显示红色波浪线。
spellcheck 在不同元素上的行为差异
不是所有可编辑元素都默认启用拼写检查，且行为不一致：
-
<input type="text">：Chrome 默认启用（即使没写spellcheck），Firefox 默认关闭；显式加spellcheck="true"更可靠 -
<textarea></textarea>：各浏览器基本都支持，但 Safari 对中文输入法响应较弱 -
contenteditable元素：需手动设spellcheck="true"，否则多数浏览器忽略；注意spellcheck不继承，子元素需单独设置 -
<input type="email">、<input type="url">：即使设spellcheck="true"，浏览器通常跳过检查（因格式校验优先）
常见误判：给 <p contenteditable="true"></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="overflowclass">Wechat Article Html</a>
<p class="overflowclass">将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 加了 spellcheck 却没反应——检查是否漏了引号，或父容器有 spellcheck="false" 覆盖。
为什么有时拼写检查不工作？关键排查点
拼写检查失效往往不是代码问题，而是环境或配置干扰：
- 系统语言 ≠ 页面语言：浏览器按系统语言加载词典，
不影响拼写检查所用词典 - 输入法处于「中文模式」：即使输入英文，部分输入法（如搜狗、微软拼音）会拦截拼写反馈，切换到英文直输模式再试
- 浏览器策略限制：Edge/Chrome 在企业策略下可能禁用拼写检查；可通过
chrome://settings/languages确认是否启用 - CSS 干扰：某些
user-select: none或pointer-events: none会间接导致编辑态异常，拼写线不渲染 - 移动端几乎无效：iOS Safari 和 Android Chrome 均不支持
spellcheck（依赖系统键盘自带纠错）
快速验证方法：打开 MDN 示例页，在 textarea 中手打 recieve，看是否有红线——若没有，问题大概率出在本地设置。
替代方案：前端 JS 拼写检查库的实际取舍
原生 spellcheck 控制力弱、兼容性差，真要落地拼写辅助，得换思路：
- 服务端校验（如
LanguageTool API）：准确但有延迟，适合提交前批量检查，不适合实时下划线 - 客户端轻量库（如
typo-js）：需预载词典，体积大（英语词典 >2MB），且无法处理上下文（比如 “their” vs “there”） - 绕过浏览器限制：监听
input事件 + 正则切词 + 简单词典查表，仅适用于技术文档等固定词汇场景 - 最务实做法：保留
spellcheck="true"作为兜底，同时对关键表单（如标题、摘要）添加提交前调用LanguageTool的异步校验，并高亮错误位置
别指望靠一行 spellcheck 解决所有问题——它只是个开关，背后没词典、没策略、没反馈控制，连大小写敏感都不支持。真正要可控的拼写体验，终究得自己搭一层逻辑。
