spellcheck 属性仅标红不纠错,且在 input 上支持极不稳定,textarea 才是可靠载体;需系统拼写开关开启、输入法切英文模式、单词结束才触发校验;iOS 需组合设置 spellcheck="false" 与 autocorrect="off" 等属性。

spellcheck 属性不纠错,只标红——它从不修改用户输入,也不提供替换建议,更不会自动修正 “recieve” 为 “receive”。你看到的红色波浪线只是浏览器调用系统词典做的单字匹配提示,背后没有纠错逻辑。
为什么 spellcheck="true" 在 input 上经常没反应
不是代码写错了,而是 input 元素对拼写检查的支持极不稳定:
-
input[type="text"]在 Chrome 中有时默认启用(哪怕没写spellcheck),Firefox 则基本忽略该属性,只认textarea -
input[type="email"]、input[type="url"]、input[type="search"]即使显式加了spellcheck="true",浏览器也大概率跳过——格式校验优先级更高 -
input[type="password"]、input[type="number"]等类型,DOM 解析阶段就被浏览器静默丢弃spellcheck属性 - 移动端(尤其 iOS Safari)几乎完全无视
input上的spellcheck,连波浪线都不画
textarea 才是 spellcheck 最可靠的载体
想稳定看到英文单词标红,必须换用 textarea,并满足三个外部条件:
- 系统拼写开关已开启:macOS 要进「系统设置 → 键盘 → 文本输入 → 在网页文本框中检查拼写」;Windows/Chrome 需在
chrome://settings/languages中启用并安装英文词典 - 输入法处于纯英文模式:搜狗、微软拼音等中文输入法在中文模式下会拦截拼写反馈,按
Shift切英文直输再试 - 用户已松开空格或回车:不是实时逐字标红,而是在单词结束(空格/换行)后触发校验
示例:<textarea spellcheck="true">Ths is a mistak.</textarea> —— 输入后敲空格,“Ths” 和 “mistak” 才可能被标红。
立即学习“前端免费学习笔记(深入)”;
spellcheck="false" 仍标红线?iOS 是重灾区
在 iOS Safari 上,仅设 spellcheck="false" 几乎无效。真正起作用的是 autocorrect:
- 必须组合使用:
spellcheck="false"+autocorrect="off"+autocapitalize="none"+inputmode="verbatim" - 验证是否生效,不能只看代码:手动输入 “recieve”,确认既无红色波浪线,右键也无“更正为…”菜单项
- macOS 系统级拼写开关若开着,也会覆盖所有
spellcheck="false"设置
拼写检查本质是操作系统级能力,浏览器只是调用接口;它不支持中文,不处理上下文(比如 “their” 写成 “there”),也不兼容动态语言切换。真要纠错,得上 JS 方案——但那是另一回事了。



















