spellcheck属性是红色波浪线提示开关，仅对textarea、text/search/tel类input、contenteditable=true元素生效；需系统、输入法、浏览器三端协同且用户用英文键盘输入英文单词才可能显示红线。
直接说结论：spellcheck 属性不是“拼写检查开关”，而是“红色波浪线提示开关”；它只对可编辑元素生效，且必须满足系统、输入法、浏览器三端协同才可能显示红线——写对了属性，不等于看到标红。
哪些元素加 spellcheck="true" 才真起作用
只有三类可编辑元素会响应该属性，其他全无效：
-
textarea：最稳定，Chrome/Firefox/Safari 全支持，推荐首选 -
input中的type="text"、type="search"、type="tel"（type="email"和type="url"常被忽略，即使设了也大概率无红线） - 显式声明
contenteditable="true"的元素（如<p contenteditable="true" spellcheck="true">），但注意：spellcheck不继承，父级设了子级不会自动生效 - 常见误用：
<div spellcheck="true">、<p spellcheck="true">—— 不可编辑，属性被浏览器静默忽略
spellcheck="true" 没红线？先查这五件事
90% 的“失效”不是代码问题，而是环境链断了：
- 操作系统拼写检查未开启：macOS 要勾选「系统设置 → 键盘 → 文本 → 在网页文本框中检查拼写」；Windows/Chrome 需在
chrome://settings/languages启用 English (US) 词典并安装完整语言包 - 输入法处于中文模式：搜狗、微软拼音等中文输入法下打英文，Chrome/Edge 会跳过拼写逻辑；必须按
Shift或Ctrl+Space切出纯英文直输状态 - 没触发校验时机：不是实时标红，需在输错单词后按
Space、Enter或Tab -
lang属性无效：写lang="en"不会让浏览器主动加载英文词典，只是语义提示；lang="zh"更不会启用中文纠错（浏览器根本不支持） - 移动端默认不渲染：iOS Safari 和多数 Android WebView 完全忽略
spellcheck，红线只由系统键盘控制
什么时候必须设 spellcheck="false"
关闭目的不是“防错字”，而是“防误标”——避免系统词典把专业内容当错误：
立即学习“前端免费学习笔记（深入）”；
- 代码片段：
const、useState、fetch等在部分浏览器下会被标红 - API key / token：
sk_live_abc123中的sk、live可能触发误判 - IP 地址、base64 字符串、医学术语、用户名（如
zxcvbn）等，词典根本覆盖不到 - 富文本编辑器中的子节点（如
<p>），若父容器设了spellcheck="false"，子节点不会继承，但漏设就会误标
单独写 spellcheck="false" 在 iOS 上基本无效；要真正禁用干扰，得四件套齐上：spellcheck="false" + autocorrect="off" + autocapitalize="none" + inputmode="verbatim"。
动态控制 spellcheck 要小心 DOM 粒度
JS 修改不能靠父容器批量操作，必须逐节点设置：
- 用
document.querySelectorAll('textarea, input[type="text"], [contenteditable="true"]')获取全部目标元素，别漏掉input - 对每个元素赋值
el.spellcheck = true或el.spellcheck = false（注意是 JS 属性，不是setAttribute()） - React/Vue 中写
spellcheck={false}是对的，但 JSX 编译后为小写spellcheck，不是spellCheck - 服务端渲染的初始 HTML 必须带该属性，否则 JS 补上可能延迟或不生效（尤其
contenteditable场景）
最常被忽略的一点：spellcheck 的生效前提不是“写了属性”，而是“用户正在用英文键盘输入英文单词”——其余全是辅助条件。
