spellcheck属性仅对当前可编辑元素生效,需组合autocorrect="off"、autocapitalize="none"、inputmode="verbatim"及系统设置才能禁用红线;monaco/codemirror需操作真实textarea;非可编辑元素或动态插入内容需手动补设。

spellcheck 属性不是设了就“全局生效”的开关,它只对当前可编辑元素起作用,且必须配合浏览器行为、系统设置和移动端特有属性才能真正控制红线是否出现。
textarea 上 spellcheck="false" 为什么还标红线
根本不是属性写错了,而是 iOS Safari 的 autocorrect="off" 才是决定性因素——它优先级高于 spellcheck,漏掉就等于白设。macOS 系统级设置(「键盘 → 文本输入 → 在网页文本框中检查拼写」)开着也会绕过所有 HTML 属性。
- 必须组合四件套:
spellcheck="false"+autocorrect="off"+autocapitalize="none"+inputmode="verbatim" -
inputmode="verbatim"是关键:它让软键盘明确进入纯文本模式,避免唤出带拼写建议的英文键盘 - 验证是否真生效,不能只看代码:输
recieve,观察是否有红色波浪线、右键是否还有“更正为…”菜单
Monaco / CodeMirror 编辑器里 spellcheck="false" 不生效
你看到的代码区(比如 <div id="editor">)根本不可编辑,<code>spellcheck 加在它上面完全被浏览器忽略。真实输入层是一个隐藏的 <textarea></textarea>,通常带 role="textbox" 或 class 含 monaco-editor-background。
- Monaco:在
editor.onDidFocusEditorText回调里获取并设置该<textarea></textarea>的spellcheck属性 - CodeMirror 6:在
view.dom插入 DOM 后,遍历子节点找到role="textbox"的<textarea></textarea>再 patch - 别碰
<pre class="brush:php;toolbar:false;"></pre>、<code>或 contenteditable 渲染层——它们不响应拼写检查
哪些地方加 spellcheck 根本没用
spellcheck 只对可编辑且聚焦的元素生效,很多常见写法从一开始就没挂对地方。
-
<input type="email">、<input type="url">、<input type="tel">:浏览器优先走格式校验,基本忽略spellcheck -
<input type="password">、<input type="number">、<input type="date">:DOM 解析阶段就被静默丢弃该属性 <div contenteditable="true"> 下的子元素(如 <code><p></p>、<span></span>):不继承spellcheck,必须每个可编辑节点都显式声明-
<pre class="brush:php;toolbar:false;"></pre>或<code>标签:默认不可编辑,加了也无效
最易被忽略的一点:动态插入的节点(比如粘贴 HTML、快捷键插入段落)不会自动带 spellcheck 属性,得用 MutationObserver 或 input 事件补上——否则新内容一进来,红线就回来了。











