你以为表单填完就算完了？Chrome 今天把 autofill 这件事彻底原生化了

写过表单的人都踩过这个坑——浏览器自动填完了，但你根本不知道它填了哪个字段、填了什么值。以前只能靠 :autofill 伪类猜，还不一定准，有时候样式还没生效用户就点提交了。今天 Chrome 的 autofill 事件把这个彻底原生化了。

这个事件的本质是：浏览器在真正把值写进去之前，先通知你一声。你可以趁机看看它准备填什么，甚至可以让它别填了，自己来填。

用法超级简单：

document.addEventListener("autofill", async event => {
  // 看看它要填什么
  for (const { field, value } of event.autofillValues) {
    console.log(field.name, value);
  }

  // 如果你想阻止默认行为、自己处理，直接调用 refill() 让它重新填
  if (event.refill !== null) {
    // 改表单结构
    // ...
    await event.refill();
  }
});

event.autofillValues 是一个数组，每个元素告诉你哪个字段会被填什么值。event.refill() 是个 Promise，调用后会重新触发一次 autofill——这在你动态改了表单结构的时候特别有用，比如选了国家之后动态插入省市区字段。

最典型的场景是地址表单。用户点了一个地址，浏览器准备填国家、城市、邮编。你的代码看到是国家是美国，就动态插入一个州的下拉框，然后调用 refill() 让浏览器把州也填上。以前这套逻辑只能靠隐藏字段或者定时器猜，现在原生支持了。

安全方面也有考虑。event.autofillValues 里的值就是你要填的那个值，不会包含浏览器没打算填的敏感信息。refill 也只影响当前表单，不会跨域乱填。

这个 API 目前在 Chrome 147+ 的 Origin Trial 阶段，可以去 Chrome origin trial page 申请 Token。Firefox 和 Safari 还没支持，但既然进了 WICG 规范，标准化只是时间问题。

下一步：如果你的站有复杂地址表单或信用卡表单，现在可以去申请 Trial 试试。等正式支持后，给表单加上 autocomplete 属性是最快见效的做法，浏览器能更准确地触发 autofill，开发者也更容易通过这个事件拿到通知。