HTML autocomplete
属性为 <input>
字段提供了各种各样的选项。其作用是向浏览器指示值是否应在适当时自动填充。
autocomplete
允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
其最常见的两个常规值:
on
—— 默认。允许浏览器自动完成输入。 没有提供有关该字段中期望的数据类型的指导,因此浏览器可以使用自己的判断。off
—— 浏览器不允许为此字段自动输入或选择一个值。文档或应用程序可能提供其自己的自动完成功能,或者出于安全方面的考虑,要求不要自动输入该字段的值。完整的
autocomplete
值可查看 Values。
注意:许多现代浏览器在某些情况下故意忽略某些字段上的
off
值,以便让用户对自动填充字段有更多的控制。一个例子是使用密码管理器。
<input autocomplete="on|off" />
下面将另一个常用的值 new-password
,它将用于密码输入框。
new-password
new-password
—— 当要求用户创建新密码(例如,注册或重置密码输入框)时,可以使用该值。此值可确保浏览器不会意外填写现有密码,同时还允许浏览器建议一个安全密码:
<form action="signup" method="post">
<input type="text" autocomplete="username" />
<input type="password" autocomplete="new-password" />
<input type="submit" value="注册" />
<button type="reset">重置</button>
</form>
此外,如果表单包含第二个密码字段,要求用户重新键入新创建的密码,则两个密码字段都应使用 autocomplete="new-password"
。
以下是 Chrome 的密码管理器,你可以在设置/自动填充/密码下管理他们:
![](https://i-blog.csdnimg.cn/blog_migrate/41aceb48aadb518f7f087f6920847fc5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/88e982d3481be5e903a03234ec862d21.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7bd2362ef685defeff13abbb37da3def.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e4a0bdbeaff087c26cf661c062575acd.png)
其他注意点
autocomplete
属性适用于下面的 <input>
类型控件:text
、search
、url
、tel
、email
、password
、datepickers
、range
和 color
。
注意:在某些浏览器中,您可能需要手动启用自动完成功能(在浏览器菜单的参数设置中进行设置)。
以下是 Can I Use 下 autocomplete 的支持情况
![](https://i-blog.csdnimg.cn/blog_migrate/fa247ba7a48eac5317dab76f920eb8d4.png)