使用Angular Material时触发Chrome地址自动填充弹窗的条件是什么

补充说明 #

我在谷歌开发者发布的文章中找到了如下说明：

「过去很多开发者会给表单字段添加autocomplete="off"属性，阻止浏览器执行任何自动完成功能。虽然Chrome对自动完成（autocomplete）数据仍会遵循该标签的规则，但对自动填充（autofill）数据不会遵循该规则。」

举个例子，点击表单中的City字段就能触发地址自动填充：如果查看DOM中的City元素，会发现它所属的form设置了autocomplete="off"属性，且City元素本身没有设置autocomplete属性。

因此触发地址自动填充的条件肯定不只有autocomplete属性。

解答 #

DOM层面触发逻辑 #

Chrome地址自动填充弹窗由浏览器内置规则触发，和前端框架无关，判断优先级从高到低如下：

1. autocomplete属性匹配：输入框的autocomplete属性设置了W3C标准的地址类枚举值（如given-name对应名字、locality对应城市、postal-code对应邮编等）时，即使父表单设置了autocomplete="off"，也会触发弹窗。
2. 字段语义匹配：未显式设置autocomplete时，浏览器会读取输入框的name、id、aria-label属性，以及关联<label>的文本内容，和内置的多语言地址关键词库匹配，命中对应关键词即可触发。
3. 字段组合识别：页面同时出现多个地址相关字段（如同时存在姓名、街道、城市、邮编输入框）时，浏览器会基于组合特征判定为地址表单，触发填充弹窗。

Angular Material中的实现方案 #

你当前的代码未触发弹窗，是因为Angular Material封装的表单组件语义关联没有被浏览器正确识别，可通过以下两种方式调整：

方案1：显式设置autocomplete属性（最稳定）

直接给对应输入框添加标准自动填充属性，兼容性最佳，不受父级autocomplete配置影响：

<mat-form-field>
  <mat-label>First Name</mat-label>
  <input matInput type="text" autocomplete="given-name">
</mat-form-field>
<mat-form-field>
  <mat-label>Last Name</mat-label>
  <input matInput type="text" autocomplete="family-name">
</mat-form-field>
<mat-form-field>
  <mat-label>City</mat-label>
  <input matInput type="text" autocomplete="locality">
</mat-form-field>
<mat-form-field>
  <mat-label>Street</mat-label>
  <input matInput type="text" autocomplete="street-address">
</mat-form-field>
<mat-form-field>
  <mat-label>Postal Code</mat-label>
  <input matInput type="text" autocomplete="postal-code">
</mat-form-field>

方案2：强化字段语义关联

如果不想设置autocomplete属性，可给输入框添加对应语义的name、id，同时绑定mat-label的for属性和输入框的id，触发浏览器语义识别：

<mat-form-field>
  <mat-label for="city">City</mat-label>
  <input matInput type="text" id="city" name="city">
</mat-form-field>

该方案依赖浏览器内置识别规则，不同版本Chrome的识别效果存在差异，优先级低于显式设置autocomplete属性。

内容的提问来源于stack exchange，提问作者Milan Tenk