为何autocomplete属性被浏览器忽略？实测与疑问

问题背景 #

我记得以前给<input>元素添加autocomplete属性时能正常工作，比如设置autocomplete="email"会自动显示之前输入过的邮箱地址。但现在Firefox和Chrome似乎仅通过name和id来决定自动填充内容，只有当设置为禁止自动完成时才会生效autocomplete属性。

测试案例 #

无自动填充效果的代码：

<input type="email" autocomplete="email">
<input type="email" title="email" autocomplete="email">
<input type="text" autocomplete="email">
<input type="email" autocomplete="on">
<input type="email" autocomplete="on email">
<label for="emai">Email</label>
<input type="email" id="emai" autocomplete="email">

能按预期自动填充的代码（但内容似乎来自其他标识）：

<input type="email" name="email" autocomplete="email">
<input type="email" id="email" autocomplete="email">
<input type="email" id="email" autocomplete="family-name">
<input type="email" name="email">
<input type="text" name="email" autocomplete="email">
<input type="email" id="username" autocomplete="family-name">

自动填充内容与autocomplete值不符的代码：

<input type="email" id="email" autocomplete="family-name">
<input type="email" id="username" autocomplete="family-name">
<input type="email" id="username" autocomplete="email">
<input type="email" id="username" autocomplete="honorific-prefix">

问题解答 #

1. autocomplete是否仍是有效属性？ #

是有效属性。Web规范里确实定义了on/off之外的细分值（如email、family-name等），MDN的文档是符合规范的。caniuse只标注on/off是因为这些细分值的实际生效逻辑依赖浏览器的自动填充策略，而非简单的“支持/不支持”，但属性本身是合法且被浏览器识别的。

2. 该属性在主流浏览器中是否正常工作？是否是浏览器配置问题？ #

autocomplete的细分值并非完全失效，但优先级远低于name、id以及输入框的type属性，甚至会被这些标识覆盖。这不是浏览器配置问题，是当前Chrome、Firefox等主流浏览器的自动填充逻辑导致的——浏览器会优先通过name/id的语义（比如email、username这类常见字段名）、输入框类型（如type="email"）来判断该填充什么内容，而非单纯依赖autocomplete属性。

3. 它是否曾经正常工作？浏览器何时开始改用name和id？ #

它确实曾经正常工作过，在2018-2020年期间，主流浏览器逐步调整了自动填充的优先级逻辑，转向以name/id、字段类型、页面表单上下文（比如是否为登录/注册表单）为主。调整的原因是早期很多网站滥用autocomplete属性，或者字段命名不规范，导致自动填充准确率低下，浏览器为了提升用户体验，优化了判断逻辑。

4. 是否误解了该属性的用途？ #

确实可能存在误解。autocomplete的核心作用是向浏览器声明字段的语义类型，而非强制浏览器填充特定内容。浏览器会综合这个属性、name/id、输入框类型、页面上下文甚至用户的历史填充记录来决定最终填充内容。当name/id的语义与autocomplete值冲突时，浏览器会优先选择它认为更准确的标识（通常是name/id，尤其是当这些字段名是通用的语义化名称时）。

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