autocorrect 属性:把「要不要自动纠错」还给页面
Chrome 152 支持了全局 autocorrect 属性,Safari 与 Firefox 早就有,于是它进入 Baseline。这篇讲它和 spellcheck 的区别、为什么这个属性以前只能靠私有前缀、以及什么场景下该关掉它。
Chrome 152 支持了全局的 autocorrect 属性,并且把它反射到 HTMLElement.prototype.autocorrect 上。Safari 与 Firefox 早就支持,于是这个属性进入 Baseline Newly available。
它的作用范围是可编辑元素:<input>、<textarea>,以及带 contenteditable 的元素。取值只有两个:on 和 off。
它和 spellcheck 不是一回事
这两个属性经常被当成同一个东西,但管的是不同的事:
| 管什么 | |
|---|---|
spellcheck |
要不要画红波浪线 |
autocorrect |
要不要自动替换你输入的内容 |
红波浪线是提示,你不理它就没事。自动纠错是直接改掉你写的东西 —— 严重程度完全不同。
所以「关掉 spellcheck 但保留 autocorrect」是一个合理的组合:我不想要下划线,但我不介意手机帮我把 teh 改成 the。
为什么这个属性长期只有私有写法
在它标准化之前,各家浏览器的写法是:
<input autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">
这里 autocorrect 是 Safari 的私有属性,Chrome 与 Firefox 会忽略它。于是同一个意图要写三四种不同的开关,还得指望它们别互相打架。
标准化的价值就在这里:一个意图,一个属性,三家都认。
什么时候该关掉
自动纠错在自然语言输入里是好事,在下面这些场景里是灾难:
代码、标识符、路径
输入框里要填的是 my_var_name、user.id、/api/v1/token 这类东西。自动纠错会把它们「修正」成自然语言的词 —— 而且你未必看得出来,因为它改的是大小写、连字符、或者悄悄插了一个空格。
<input name="identifier" autocorrect="off" autocapitalize="off" spellcheck="false">
用户名、邮箱、URL
同一个道理。邮箱里的自动大写尤其讨厌:User@Example.com 在某些后端就是和 user@example.com 不同。
一次性验证码、密钥
这类输入框通常是固定字符集,自动纠错只会带来意外。
什么时候留着它
- 搜索框
- 评论、留言
- 长文本输入(文章编辑器)
- 任何你在手机上打字会希望被帮忙的地方
我的判断
这个属性本身没什么技术含量 —— 它就是把一个各家早就有的开关统一了。但它是个好例子,说明**「浏览器替用户改输入」这件事需要显式的许可**。
以前的做法是「默认帮忙,你想关就加一堆私有属性」。现在的做法是「默认帮忙,但有一个标准的、三家都认的开关」。方向是对的:替用户做决定的功能,应该有一个便宜的退出方式。
顺带一提,HTMLElement.prototype.autocorrect 被反射出来意味着你也能从 JavaScript 读它 —— 这对「根据当前设置调整提示文案」之类的小交互有用,但别用它去猜用户在想什么。

评论
…