spellcheck属性仅对textarea、input[type="text"/"search"]及contenteditable="true"元素生效；其他如input[type="email"]、不可编辑的p/div等均被静默忽略，且需系统拼写开启、英文输入法、聚焦及空格/回车触发才显示波浪线。
直接加 spellcheck="true" 不一定出红线——90% 的失效不是代码写错，而是系统、输入法或浏览器策略没配齐。
哪些 HTML 元素加 spellcheck 才真正生效
spellcheck 只对三类可编辑元素起作用：textarea、input[type="text"] 或 input[type="search"]、以及 contenteditable="true" 的元素（如 div 或 p）。其他情况都会被浏览器静默忽略：
-
input[type="email"]、input[type="url"]、input[type="number"]、input[type="password"]：即使写了spellcheck="true"，浏览器也优先走格式校验，基本不触发波浪线 - 普通
p、div、span：不可编辑，属性完全无效 -
contenteditable元素默认是spellcheck="false"，必须显式声明，且不继承父级——<div contenteditable spellcheck="true"><p>hello</p></div>中的p仍不会标红，得写成<p contenteditable spellcheck="true">hello</p>
spellcheck="true" 没红线？先查这四个外部条件
红线是否出现，不取决于你有没有写对属性，而取决于运行时环境是否满足全部前提：
- 操作系统拼写检查已开启：macOS 要勾选「系统设置 → 键盘 → 文本输入 → 在网页文本框中检查拼写」；Windows/Chrome 需在
chrome://settings/languages中启用并装好 English (US) 词典 - 输入法处于纯英文直输模式：搜狗、微软拼音等中文输入法下打英文，常被拦截；按
Shift或Ctrl+Space切出中文再试 - 元素必须聚焦且可编辑：
disabled、readonly或未获得焦点时，不会触发检查 - 输入后需触发边界事件：不是实时逐字标红，要按下空格、回车或 Tab 才可能刷新波浪线
移动端禁用拼写干扰必须四件套组合
iOS Safari 对 spellcheck 属性基本无视，单设 spellcheck="false" 几乎无效。软键盘仍会自动纠错或弹建议栏，尤其在输入 API key、JSON、路径等场景下极易误标。真正可靠的写法是：
<textarea spellcheck="false" autocorrect="off" autocapitalize="none" inputmode="verbatim"></textarea>
-
autocorrect="off"：iOS 最优先压制拼写建议的开关 -
autocapitalize="none"：防止首字母大写干扰代码或配置项 -
inputmode="verbatim"：明确告诉键盘“别联想、别纠错、别弹词库” -
spellcheck="false"：补全语义，覆盖部分 Android 行为
动态控制 spellcheck 开关的正确姿势
批量修改不能只改父容器，必须逐节点设置。用 setAttribute() 是常见错误，它不保证重绘波浪线：
- ✅ 正确：
el.spellcheck = false（赋布尔值，触发浏览器内部状态更新） - ❌ 错误：
el.setAttribute('spellcheck', 'false')（只改 DOM 属性，部分浏览器不响应） - ⚠️ 注意：修改后波浪线不会立即消失，可能需要焦点切换或内容重排才刷新
- 务必用
querySelectorAll('textarea, input[type="text"], [contenteditable]')精准获取目标元素，别漏掉contenteditable节点
最常被忽略的是：拼写检查依赖本地系统词典和输入上下文，而不是 HTML 属性本身。用户看到红线与否，最终取决于他开了什么设置、用了什么输入法、连了哪台设备——spellcheck 只是一个提示，不是开关，更不是校验边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
