如何在网页表单字段/输入标签上禁止浏览器自动完成?

如何在主要浏览器中为特定 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 所做的更改生效，许多浏览器将页面保存在缓存中，这给我留下了不好的印象，即该页面不起作用，但浏览器实际上并未带来更改。