配了八年表单，每次想关掉输入框的自动大写和拼写修正，都要靠 autocomplete=off 加 CSS 黑魔法——今天 autocorrect 属性把这件事用一个 HTML 属性原生化了

配了八年表单，每次想关掉输入框的自动大写和拼写修正，都要靠 autocomplete="off" 加 CSS 滤镜黑魔法——今天 autocorrect 属性把这件事用一个 HTML 属性原生化了。

autocorrect 是 Chrome 152 稳定的全局 HTML 属性，适用于所有可编辑元素（contenteditable、<input>、<textarea>）。它的语义很简单：告诉浏览器这个字段要不要自动修正拼写和大小写。

基本用法

<!-- 关闭自动修正：适合代码输入、技术术语、品牌名 -->
<input type="text" autocorrect="off" placeholder="输入 SKU 编码">

<!-- 打开自动修正：适合普通文本输入，默认行为 -->
<input type="text" autocorrect="on" placeholder="输入地址">

<!-- 配合 spellcheck 属性一起用 -->
<textarea 
  autocorrect="off" 
  spellcheck="false" 
  placeholder="输入代码注释"
></textarea>

以前要达到同样效果，业界流传的方案是：

/* 浏览器兼容性差的 CSS 黑魔法 */
input:-webkit-autofill,
input[autocomplete="off"] {
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: 0 0 0 1000px white inset;
  filter: none;
}

这些 CSS 方案依赖浏览器前缀，且只能处理 autofill 场景，对 contenteditable 完全无效。autocorrect 属性是语义级的声明，浏览器直接理解意图。

三类典型场景

场景一：技术术语和代码片段

搜索框输入”API endpoint”时，浏览器会把它拆成”API”和”endpoint”两个词，后者可能自动首字母大写。代码编辑器类的输入框必须关掉这个行为。

<!-- 搜索带连字符的 SKU 或版本号 -->
<input type="search" autocorrect="off" spellcheck="false">

<!-- contenteditable 代码块 -->
<div contenteditable="true" autocorrect="off" spellcheck="false">
  const response = await fetch("/api/v2/users");
</div>

场景二：品牌名和人名

“Apple” 在自动修正后变成”Apple”，看起来没问题，但”iphone”变成”iPhone”就可能影响搜索精确匹配。精确匹配场景需要关闭修正。

<!-- 商品搜索：品牌名、型号、SKU 精确匹配 -->
<input type="text" autocorrect="off" name="brand" placeholder="输入品牌名">

场景三：表单自动填充与安全

autocomplete 属性已经能控制浏览器填充哪些字段，但 autocorrect 控制的是填充后是否修正显示。最常见的坑：Safari 在自动填充后会把首字母大写，导致精确匹配查询失败。

<!-- 姓名字段：需要首字母大写，但不想浏览器"自作聪明"改其他词 -->
<input type="text" autocomplete="name" autocorrect="off">

<!-- 地址：不需要自动修正 -->
<input type="text" autocomplete="street-address" autocorrect="off">

spellcheck 和 autocorrect 的区别

两者独立工作。spellcheck="false" 只关拼写提示，不关自动修正；autocorrect="off" 只关自动修正，不关拼写检查。需要同时关闭时两个都要写。

渐进增强写法

/* 不支持的浏览器静默降级：不关闭任何行为 */
@supports not (autocorrect: off) {
  /* 备选 CSS 滤镜方案 */
}

浏览器支持

Chrome/Edge 152+、Safari 15.4+（iOS 更早）、Firefox 暂未支持。由于是布尔属性，新浏览器会忽略不支持的值并使用默认行为 on，所以即使 Firefox 用户看到的也只是原来的自动修正行为，不会有功能错误。

下一步

1. 查你的搜索框代码：input[type="search"] 有没有加 autocorrect="off"？SKU/型号/品牌搜索场景下，这个属性直接影响搜索结果的准确性
2. 查 contenteditable 编辑器：代码编辑器类应用必须加 autocorrect="off" spellcheck="false"，否则浏览器会在你输入代码时自动改词
3. 如果你在做国际化表单：非英语语言里 autocorrect 的行为差异更大，建议显式声明而不依赖浏览器默认