spellcheck="true" 不一定出红线,主因是系统拼写开关未开、输入法处于中文模式或未触发检查时机;textarea 和 input[type="text"] 必须显式声明 spellcheck,且 contenteditable 元素需同时设 contenteditable="true" 和 spellcheck="true"。

直接写 spellcheck="true" 不一定出红线,多数情况是环境没配齐,不是代码写错了。
textarea 和 input[type="text"] 必须显式声明 spellcheck
别指望默认值。虽然部分浏览器对 <textarea></textarea> 默认启用拼写检查,但行为不一致:<input type="text"> 在 Firefox 中常默认关闭,Chrome 虽默认开,但企业策略可能禁用。
-
<textarea spellcheck="true"></textarea>是最稳妥的写法;简写<textarea spellcheck></textarea>也等价 -
<input type="text" spellcheck="true">可用,但若发现无波浪线,优先换用<textarea rows="1" spellcheck="true"></textarea> -
<input type="email">、<input type="url">、<input type="password">即使加了spellcheck="true",浏览器通常跳过——格式校验优先级更高
contenteditable 元素 spellcheck 失效?默认就是关的
contenteditable="true" 的 <div> 或 <code><p></p> 默认不启用拼写检查,必须同时满足两个条件:可编辑 + 显式开启。
- 必须写
<div contenteditable="true" spellcheck="true">,缺一不可 <li> <code>spellcheck不继承,子元素如<p></p>也要单独设spellcheck="true" - 父级设了
spellcheck="false"会覆盖子级,嵌套结构里容易漏查 - 避免加
user-select: none或pointer-events: none,这类 CSS 会让编辑态异常,波浪线压根不渲染 -
系统拼写开关没开:macOS 需「系统设置 → 键盘 → 文本输入 → 在网页文本框中检查拼写」;Windows/Chrome 需
chrome://settings/languages中启用并安装 English (US) 词典 -
输入法处于中文模式:搜狗、微软拼音等 IME 激活时,即使你打英文,浏览器也常跳过拼写高亮;切到纯英文直输(如按
Shift)再试 - 没触发检查时机:波浪线通常在单词输入完成、按下空格 / 回车 / Tab 后才出现,不是实时逐字标红;输入中文、数字或混合内容时,浏览器一般不检查
- 要彻底关闭,得组合四件套:
spellcheck="false"+autocorrect="off"+autocapitalize="none"+inputmode="verbatim" - 验证是否真生效:手动输入
recieve,看有没有红色波浪线,右键菜单里有没有「更正为…」选项 - Chrome 扩展(如 Grammarly)或系统语法插件也可能画线,这不是
spellcheck的行为,而是外部干扰
写了 spellcheck="true" 却没红线?先查这三处
拼写检查不是纯前端逻辑,它依赖系统级支持和输入上下文,90% 的“失效”卡在这几处。
spellcheck="false" 还有红线?iOS 和 macOS 是重灾区
在 iOS Safari 上,spellcheck="false" 基本无效,真正起作用的是系统级 autocorrect 开关。
最常被忽略的一点:拼写检查的生效前提不是“写了属性”,而是“用户正用英文键盘输入英文单词,且系统词典已加载、浏览器没被策略或扩展劫持”。











