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

textarea 里 spellcheck="false" 为什么还标红

不是属性写错了，而是被 iOS Safari 的 autocorrect="off" 抢先压制了拼写逻辑——此时 spellcheck="false" 形同虚设。macOS 系统级设置（如「键盘 → 文本输入 → 在网页文本框中检查拼写」未关闭）也会让所有 spellcheck 失效。

验证是否真生效，不能只看 HTML 源码，得在浏览器里输一个明显错词（比如 recieve），观察：是否有红色波浪线；右键点击是否出现“更正为…”菜单项。两者皆无才算成功。

• textarea 是 spellcheck 最稳定的载体，所有主流浏览器都认，优先用它而不是 input[type="text"]
• input[type="email"]、input[type="url"]、input[type="tel"] 基本不响应 spellcheck，浏览器优先做格式校验，拼写检查被跳过
• input[type="password"]、input[type="number"]、input[type="date"] 完全无视该属性，DOM 解析时就被静默丢弃

Monaco/CodeMirror 编辑器里 spellcheck="false" 不起作用的根源

这类编辑器的真实输入层通常是隐藏的 textarea（Monaco 里常是 class="monaco-editor-background" 下的 textarea；CodeMirror 6 中是 role="textbox" 的 textarea），而你看到的代码区是多个绝对定位的 div + span 渲染出来的——它本身不可编辑，spellcheck 没地方挂。

解决路径很明确：找到那个实际承载输入事件的隐藏 textarea，然后对其设置 spellcheck="false"。

• Monaco：可在 editor.onDidFocusEditorText 后动态设置，或初始化时 patch DOM
• CodeMirror 6：在 view.dom 插入后，用 v（视图实例）操作该 textarea
• 别对 pre 或 code 标签加 spellcheck="false"——它们默认不可编辑，属性完全无效

contenteditable 区域慎用 spellcheck 的真实代价

富文本编辑器若基于 div[contenteditable="true"] 实现，spellcheck 行为极不可靠：Safari（尤其 macOS）常忽略设置；父元素设了 spellcheck="false"，子节点会继承但开发者往往漏查；子元素也不会自动继承，必须显式重复声明。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

更麻烦的是，contenteditable 里嵌套的 p、span 等子元素，即使写了 spellcheck="false"，也可能因浏览器实现差异而失效。

• 如果目标是写代码或结构化文本（JSON/YAML/HTML 片段），直接放弃 contenteditable 的拼写控制
• 改用 textarea + 自定义高亮（如 CodeMirror 或 Monaco）更可控
• 若必须用 contenteditable，需在每个可编辑子节点上单独写 spellcheck="false"，不能只靠父级继承

移动端和 Electron 场景下 spellcheck 的四件套组合

iOS Safari 存在一个关键限制：系统「自动拼写更正」开关开启时，即使 spellcheck="false"，焦点获取后仍可能短暂显示下划线（约 200ms 后消失）。这不是 bug，而是其异步词典检查机制导致。

要彻底规避，必须组合设置：

• spellcheck="false" —— 告诉浏览器别启动拼写逻辑
• autocorrect="off" —— iOS 必加，否则软键盘仍自动修正
• autocapitalize="none" —— 防止首字母意外大写（影响 const foo = 这类结构）
• inputmode="verbatim" —— 明确提示键盘用纯文本模式，避免数字/符号键盘误触发校验

Google 翻译页面的 textarea 就是这么写的，兼容性经过大规模验证。Electron 应用还需额外在主进程 WebPreferences 里设 spellcheck: false，这是 HTML 层无法覆盖的进程级控制。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！