如何在网页表单字段/输入标签上禁止浏览器自动完成?
如何在主要浏览器中为特定 input
(或 form field
)禁用 autocomplete
?

Answer 1 nlucaroni
Firefox 30会忽略密码的 autocomplete="off"
,而是选择提示用户是否应将密码存储在客户端上。请注意以下2014年5月5日的评论:
- 密码管理器总是提示是否要保存密码。未经用户许可,不会保存密码。
- 我们是继IE和Chrome之后,第三个实现这一改变的浏览器。
根据Mozilla开发人员网络文档,布尔表单元素属性 autocomplete
可以防止将表单数据缓存在较旧的浏览器中。
<input type="text" name="foo" autocomplete="off" />
Answer 2 Ben Combee
除了 autocomplete=off
之外,还可以通过生成页面的代码使表单字段名称随机化,也许可以通过在名称末尾添加一些特定于会话的字符串来实现。
当表单提交时,你可以在服务器端处理它们之前将这部分内容剥离出来。这将防止Web浏览器找到你的字段的上下文,也可能有助于防止XSRF攻击,因为攻击者无法猜测表单提交的字段名。
Answer 3 apinstein
现在,大多数主要的浏览器和密码管理器(正确的是IMHO)都会忽略 autocomplete=off
。
为什么?许多银行和其他“高安全性”网站都出于“出于安全目的”在其登录页面上添加了 autocomplete=off
补全功能,但这实际上降低了安全性,因为这会使人们更改这些高安全性网站上的密码很容易记住(从而破解) ),因为自动填充功能已损坏。
很久以前,大多数密码管理器开始忽略 autocomplete=off
,现在浏览器开始仅对用户名/密码输入执行相同的操作。
不幸的是,在自动完成的实现中存在的错误会将用户名和/或密码信息插入到不适当的表单字段中,导致表单验证错误,或者更糟的是,意外地将用户名插入到用户故意留下的空白字段中。
网站开发人员要做什么?
- 如果你能把所有的密码字段单独保留在一个页面上,那就是一个很好的开始,因为似乎密码字段的存在是触发用户/密码自动完成的主要因素。否则,请阅读下面的提示。
- Safari注意到有两个密码字段,并且在这种情况下会禁用自动完成功能,前提是该密码必须是更改密码形式,而不是登录形式。因此,请确保在您允许的任何表单中使用2个密码字段(新密码并确认新密码)
不幸的是,Chrome 34会在看到密码字段时尝试使用用户/密码自动填充字段。这是一个非常糟糕的错误,希望它们会改变Safari的行为。但是,将其添加到表单顶部似乎会禁用密码自动填充功能:
<input type="text" style="display:none"> <input type="password" style="display:none">
我还没有彻底调查IE或Firefox,但如果其他人在评论中得到信息,我将很乐意更新答案。
Answer 4 dsuess
有时,即使autocomplete = off也不会阻止将凭据填充到错误的字段中,但不能阻止用户或昵称字段。
这个变通方法是在apinstein的关于浏览器行为的帖子之外。
修复浏览器以只读方式自动填充并设置为可写焦点(单击和标签)
<input type="password" readonly
onfocus="this.removeAttribute('readonly');"/>
更新:移动Safari在字段中设置光标,但不显示虚拟键盘。新的修复和以前一样,但会处理虚拟键盘。
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
现场演示https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
因为浏览器会自动将凭据填充到错误的文本字段!?
当密码字段的格式相同时,我会在Chrome和Safari上发现这种奇怪的行为。我猜想,浏览器会寻找一个密码字段来插入您保存的凭据。然后,它会自动填充(仅出于观察目的而猜测)最接近的类似文本的输入字段,该字段出现在DOM中的密码字段之前。由于浏览器是最后一个实例,您无法控制它,
上面这个readonly-fix对我有用。
Answer 5 Geynen
Chrome的解决方案是将 autocomplete="new-password"
到输入类型的密码中。请检查以下示例。
Example:
<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>
Chrome会始终在发现密码类型的框时自动对数据进行自动完成,足以表明该框是否为 autocomplete = "new-password"
。
这对我很有效。
注意:请确保使用 F12
所做的更改生效,许多浏览器将页面保存在缓存中,这给我留下了不好的印象,即该页面不起作用,但浏览器实际上并未带来更改。