spellcheck属性仅是提示浏览器是否启用原生拼写高亮，非强制开关；仅对textarea、input[type="text"/"search"]及contenteditable="true"元素生效，且受浏览器、系统词典、输入法及autocorrect等属性共同影响。
spellcheck 属性不是开关，它只是向浏览器发出一个提示：允许或禁止对这个可编辑元素启用原生拼写高亮。是否真画出红色波浪线，取决于浏览器实现、系统词典、输入法状态，以及有没有其他属性在底层覆盖它。
哪些 HTML 元素加 spellcheck 才真正生效
只有三类可编辑元素会响应该属性：
-
<textarea></textarea>—— 最稳定，Chrome/Firefox/Edge/Safari 都认，推荐优先用于需精确控制的场景 -
<input type="text">或<input type="search">—— 可设，但行为不一致；Chrome 默认启用，Firefox 默认关闭，iOS Safari 基本无视 <div contenteditable="true"> 或 <code><p contenteditable="true"></p>—— 必须显式加spellcheck="true"，否则多数浏览器默认关闭（不继承！子元素也要单独写）以下写法完全无效：
-
<input type="email">、<input type="url">、<input type="number">、<input type="password">—— 浏览器解析时静默丢弃spellcheck属性 -
<p spellcheck="true"></p>、<span spellcheck="true"></span>—— 不可编辑，属性被忽略
spellcheck="false"为什么还标红线这不是属性没起作用，而是其他机制在“抢答”：
- iOS Safari 中，
autocorrect="off"会直接压制拼写建议，此时单设spellcheck="false"形同虚设 -
inputmode="numeric"或inputmode="tel"让系统键盘跳过拼写逻辑，spellcheck失去作用对象 - 父级元素设了
spellcheck="false"，子元素会继承 —— 富文本编辑器嵌套结构里容易漏查 - macOS 系统级设置开启「在网页文本框中检查拼写」，Chrome 会绕过
spellcheck强制加线
要真正禁用干扰，推荐组合写：
spellcheck="false"+autocorrect="off"+autocapitalize="none"（移动端尤其必要）动态修改
spellcheck的正确方式用 JavaScript 修改时，别用
setAttribute()，它不保证重绘波浪线：- ✅ 正确：
el.spellcheck = false（赋布尔值，触发浏览器内部状态更新） - ❌ 错误：
el.setAttribute('spellcheck', 'false')（只改 DOM 属性，部分浏览器不响应） - ⚠️ 注意：修改后波浪线不会立即消失，可能需要焦点切换或内容重排才刷新
批量控制表单字段时，只匹配明确支持的类型：
document.querySelectorAll('input[type="text"], textarea').forEach(el => el.spellcheck = false);别包含
input[type="email"]或input[type="search"]，它们基本不响应。验证
spellcheck是否真实工作不能只看 HTML 里有没有那个属性，得观察运行时反馈：
- 在支持的
<textarea></textarea>中输入明显错词（如recieve），看是否有红色波浪线（Chrome/Edge 通常有，Firefox 需确认layout.spellcheckDefault设为 1） - 右键点击错词，检查上下文菜单是否出现“更正为…”或“添加到字典”选项
- 临时换一个干净的
<textarea spellcheck="true"></textarea>，输入helo测试；若仍无反应，问题大概率出在系统级设置或输入法处于中文模式
最常被忽略的是输入法上下文：搜狗、微软拼音等中文输入法激活时，哪怕你打英文单词，也会拦截拼写反馈；必须切到纯英文直输（比如按 Shift）再试。
-
