spellcheck="false"仅对textarea和contenteditable="true"元素生效；input[type="text"]等单行输入框不支持，pre/code等只读标签加了也无效。
spellcheck="false" 能关掉红色波浪线，但只对 textarea 和 contenteditable="true" 元素生效；给 input 标签加这个属性基本没用。
哪些元素上 spellcheck="false" 真的起作用
浏览器原生拼写检查只作用于可编辑的文本容器：textarea 和设置了 contenteditable="true" 的元素（比如富文本编辑器常用的 div 或 pre 包裹层）。input[type="text"]、input[type="search"] 等单行输入框不响应该属性，写了也常被忽略。
常见错误是给只读的 code 或 pre 标签加 spellcheck="false"——它们默认不可编辑，该属性完全无效。
- ✅ 正确做法：在编辑器根容器（如
div#editor）上同时设contenteditable="true"和spellcheck="false" - ✅ 若用
textarea实现简易编辑器，直接加spellcheck="false"即可 - ❌ 错误做法：对渲染后的预览区、静态代码块或
input标签硬套该属性
为什么 iOS Safari 还有短暂红线
spellcheck="false" 在 Chrome/Firefox/Edge 上能立即移除波浪线，但 Safari（尤其 macOS 13+ 和 iOS 16+）有个关键限制：如果系统「自动拼写更正」开启，且元素获得焦点，它仍可能短暂显示下划线（约 200ms 后消失）。这不是属性失效，而是其异步词典检查机制导致。
要彻底规避，需配合以下属性：
-
autocorrect="off"：iOS Safari 最认这个，必须加 -
autocapitalize="none"：防止键盘自动大写（如把const改成Const） -
inputmode="verbatim"：提示键盘用纯文本模式，绕过拼写建议逻辑 - 避免用
inputmode="text"——它会主动唤起带拼写建议的键盘，和spellcheck冲突
Monaco / CodeMirror 编辑器里 spellcheck="false" 不生效怎么办
这类编辑器通常把真实编辑层（如一个透明 textarea）覆盖在视觉区域之上，你看到的“编辑区”本身不是可编辑元素，spellcheck 自然挂不上。
解决路径很明确：找到那个实际承载输入事件的隐藏 textarea，再对其设置 spellcheck="false"：
- Monaco 中常是
class="monaco-editor-background"下的textarea；可通过editor.onDidFocusEditorText后动态设置 - CodeMirror 6 中是
role="textbox"的textarea；在view.dom插入后用 JS 补上属性即可 - 别试图给外层
div或codemirror组件加spellcheck，那只是白忙
真正容易被忽略的是：拼写红线和语法红线常混在一起。比如 Sublime 里标红的可能是 SublimeLinter 报的 consol.log，VS Code 里可能是 cSpell 插件和 ESLint 同时在画线——不先确认来源就改 spellcheck，问题还在原地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
