spellcheck属性仅提示浏览器启用原生拼写高亮，实际效果受浏览器实现、系统词典、输入法模式及配套属性（如autocorrect、inputmode）共同影响；textarea最稳妥，contenteditable需显式设spellcheck="true"且不继承，input仅text/search类型可靠支持。
spellcheck 属性本身不“开启”拼写检查功能，它只是向浏览器发出一个提示：允许对这个可编辑元素的内容做原生拼写高亮。是否真画出红色波浪线，取决于浏览器实现、系统词典、输入法状态和配套属性是否冲突。
textarea 是最稳妥的启用入口
几乎所有主流浏览器都默认支持 textarea 的拼写检查，且行为一致。显式加 spellcheck="true" 可避免 Firefox 等浏览器因默认关闭而失效。
- 必须确保用户正在输入（只读、
disabled或未聚焦时不会触发） - 输入后需松开空格或回车才可能触发波浪线，不是逐字实时标红
- 若没反应，先验证系统级设置：macOS 要勾选「系统设置 → 键盘 → 文本输入 → 在网页文本框中检查拼写」；Windows/Chrome 需在
chrome://settings/languages中启用并安装对应语言词典 - 输入法必须处于英文直输模式（如按 Shift 切换），搜狗、微软拼音等中文输入法会拦截拼写反馈
contenteditable 元素必须显式声明 spellcheck
contenteditable="true" 的 div 或 p 默认是 spellcheck="false"，这是最容易被忽略的默认行为。
- 父级设了
spellcheck="false"会覆盖子级，嵌套结构里要逐层检查 -
spellcheck不继承，所以<div contenteditable spellcheck="true"><p>hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>中的p仍不会标红，得写成<p spellcheck="true">hello</p> - CSS 若含
user-select: none或pointer-events: none，会导致编辑态异常，波浪线压根不渲染
input 元素只有部分 type 真正响应 spellcheck
别在 input 上浪费调试时间——不是所有类型都支持：
- 可靠生效：
type="text"、type="search"；显式加spellcheck="true"最稳妥 - 基本无效：
type="email"、type="url"、type="tel"；浏览器优先走格式校验，通常跳过拼写检查 - 完全无视：
type="password"、type="number"、type="date"；DOM 解析时就被静默丢弃 - 移动端尤其注意：
inputmode="numeric"或inputmode="tel"会让系统键盘直接禁用拼写逻辑，spellcheck形同虚设
spellcheck="false" 失效？大概率是其他属性在覆盖
单独设 spellcheck="false" 很难真正关掉红线，因为 iOS Safari、Android Chrome 等环境有更底层的干预机制。
- iOS Safari 中，
autocorrect="off"会直接压制拼写建议，此时spellcheck="false"无效；必须组合使用：spellcheck="false"+autocorrect="off"+autocapitalize="none" -
inputmode="numeric"或inputmode="tel"同样绕过拼写检查，spellcheck失去作用对象 - 企业部署的 Chrome/Edge 可能通过组策略禁用拼写服务；可临时用个人账号打开隐身窗口验证
- 右键点击错词，看上下文菜单是否出现“更正为…”或“添加到字典”选项——这才是真实生效的信号，比单纯看属性值靠谱得多
spellcheck 属性已不够用。这时候该考虑 WebAssembly 拼写库（如 tiny-spellchecker）或后端 API（如 LanguageTool）。原生属性只适合轻量提示，别指望它扛住复杂场景。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
