textarea中spellcheck="false"仍标红并非属性错误,而是被ios safari的autocorrect="off"压制或macos系统级拼写检查开启所致;需组合spellcheck="false"、autocorrect="off"、autocapitalize="none"、inputmode="verbatim"四件套,并验证错词无波浪线及右键无更正菜单才算生效。

textarea spellcheck="false" 为什么还显示红线
不是属性写错了,而是被 iOS Safari 的 autocorrect="off" 抢先压制了拼写逻辑,或者 macOS 系统级「在网页文本框中检查拼写」开关开着——此时 spellcheck="false" 形同虚设。验证是否真生效,得输一个明显错词(比如 recieve),看两点:有没有红色波浪线;右键点是否弹出“更正为…”菜单。两者皆无才算成功。
textarea 上 spellcheck="false" 的正确写法
spellcheck="false" 必须显式声明值,不能只写 spellcheck(布尔简写在 textarea 上不被识别)。它只对可编辑的 textarea 生效,且默认就是 true,所以省略等于开启。
-
<textarea spellcheck="false"></textarea>✅ 基础有效 -
<textarea spellcheck="false" autocorrect="off" autocapitalize="none" inputmode="verbatim"></textarea>✅ 四件套,覆盖 Safari/iOS 全场景 -
<textarea spellcheck="false" readonly></textarea>❌readonly会让拼写检查直接跳过,但你也无法输入
哪些地方加 spellcheck="false" 是白忙活
给 <pre class="brush:php;toolbar:false;"></pre>、<code> 或只读 <div> 加 <code>spellcheck="false" 完全无效——它们默认不可编辑,浏览器压根不处理这个属性。常见错误是把编辑器渲染层(比如 Monaco 里那些绝对定位的 <span></span>)当成输入目标去设属性,结果没用。
- 真正起作用的是实际捕获输入的元素:隐藏的
<textarea></textarea>(Monaco 中常在class="monaco-editor-background"下;CodeMirror 6 中是role="textbox"的<textarea></textarea>) - 不要对
<input type="password">或<input type="number">设spellcheck——这些类型解析时就被浏览器静默丢弃 - Chrome 支持稳定;Safari(尤其 macOS 13+ / iOS 16+)有约 200ms 延迟红线,属异步词典检查机制,不是 bug
动态修改 spellcheck 的坑
用 JS 改属性必须走 DOM 属性赋值,而不是 setAttribute:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
el.spellcheck = false; // ✅ 正确,立即生效
el.setAttribute('spellcheck', 'false'); // ❌ 可能不生效,尤其在 Safari 中
如果表单含动态插入的 textarea,插入后得立刻手动设置 el.spellcheck = false,否则默认开启。Monaco 编辑器建议监听 editor.onDidFocusEditorText 后再 patch 那个隐藏 textarea。
最易忽略的是系统级设置——哪怕 HTML 写得再全,macOS「键盘 → 文本输入 → 在网页文本框中检查拼写」开着,所有 spellcheck 都会失效。










