一般来说,输入表单、提交之后,浏览器会保存表单内容,刷新页面之后对应表单内容会自动填充。这个机制可以说是有利有弊,好的是如果经常登录同一个平台,自动填充账号密码显然可以提高效率;但如果是在注册这种场景下,每一次输入表单的内容都不相同,自动填充功能会严重影响我们的使用体验。
原生HTML
在原生html中,autocomplete 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
现代浏览器实现了内建的密码管理功能:当用户在一个网站上输入了用户名和密码,浏览器会为用户提供记忆功能。当用户再次访问这个网站时,浏览器使用保存的值自动填写登录字段。
即使没有主密码,浏览器内置的密码管理对安全也有益无害。由于用户不需要记住已被浏览器存储的密码,因此他们可以放心选择更强的密码。由于这个原因,许多现代浏览器都不支持在登录字段中设置 autocomplete=“off”:
如果一个网站为 设置了autocomplete=“off”,表单中包含用户名和密码字段,浏览器仍会为这次登录提供记忆功能,并且如果用户同意,用户在下一次访问网站时,浏览器会自动填写这些字段。
如果网站给用户名和密码的 框设置了 autocomplete=“off”,浏览器仍会为这次登录提供记忆功能,并且如果用户同意,用户在下一次访问网站时,浏览器会自动填写这些字段。
elementUI
在vue2+elementUI的实际业务场景中,官方其实也提供了原生html提供的autocomplete=“off”,然而匪夷所思的是大概率不起作用(Google,Firefox,Microsoft Edge,360急速)都没有起作用。
mdn文档中倒是提供了一种解决方案:使用 autocomplete=“new–password” 阻止自动填充。如果你定义了一个用户管理页面,其中用户可以为其他人指定新的密码,因此你想阻止密码字段的自动填充,你可以使用 autocomplete=“new–password”。