如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?


当前回答

为字段使用非标准的名称和id,因此“name”不是“name_”。浏览器将不会将其视为名称字段。

最好的一点是,您可以对某些但不是所有字段执行此操作,并且它将自动完成某些但不是全部字段。

其他回答

有时,即使autocomplete=off也无法阻止将凭据填写到错误的字段中,而不是用户或昵称字段。

除了apinstein关于浏览器行为的帖子之外,还有一个变通方法。

修复浏览器自动填充为只读,并在焦点上设置为可写(单击并选项卡)

 <input type="password" readonly
     onfocus="this.removeAttribute('readonly');"/>

更新:

Mobile 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/

//更新结束

因为浏览器自动将凭据填充到错误的文本字段!?

我注意到在Chrome和Safari上,当相同的表单中有密码字段时,会出现这种奇怪的行为。我猜浏览器会寻找一个密码字段来插入您保存的凭据。然后它会自动填充(只是由于观察而猜测)最近的类似文本的输入字段,该字段出现在DOM中的密码字段之前。因为浏览器是最后一个实例,您无法控制它。

上面的这个只读修复对我有用。

这将解决此问题

autocomplete="new-password"

大多数主要浏览器和密码管理器(正确地说,IMHO)现在都忽略了autocomplete=off。

为什么?许多银行和其他“高安全性”网站“出于安全目的”在其登录页面中添加了autocomplete=off,但这实际上降低了安全性,因为这会导致人们更改这些高安全性网站上的密码,以便于记忆(从而破解),因为自动完成功能已被破坏。

很久以前,大多数密码管理器开始忽略autocomplete=off,现在浏览器开始只对用户名/密码输入执行相同的操作。

不幸的是,自动完成实现中的错误会将用户名和/或密码信息插入到不适当的表单字段中,从而导致表单验证错误,或者更糟的是,意外地将用户名插入到用户故意留空的字段中。

web开发人员应该做什么?

如果您可以单独保存页面上的所有密码字段,这是一个很好的开始,因为密码字段的存在似乎是用户/密码自动完成的主要触发因素。否则,请阅读下面的提示。Safari注意到有两个密码字段,并在这种情况下禁用自动完成,假设它必须是一个更改密码表单,而不是登录表单。因此,请确保在允许的任何表单中使用两个密码域(新的和确认新的)不幸的是,Chrome34每当看到密码字段时,都会尝试使用user/pass自动填充字段。这是一个非常糟糕的bug,希望他们会改变Safari的行为。但是,将其添加到表单顶部似乎会禁用密码自动填充:<input-type=“text”style=“display:none”><input-type=“password”style=“display:none”>

我还没有彻底调查IE或Firefox,但如果其他人在评论中有信息,我很乐意更新答案。

除了设置autocomplete=off之外,您还可以通过生成页面的代码随机化表单字段名称,或者在名称末尾添加一些特定于会话的字符串。

提交表单后,您可以在服务器端处理表单之前剥离该部分。这将阻止web浏览器查找字段的上下文,也可能有助于防止XSRF攻击,因为攻击者无法猜测表单提交的字段名称。

我通过添加两个假输入并赋予它们绝对位置来阻止Chrome 66自动填充:

<form style="position: relative">
  <div style="position: absolute; top: -999px; left: -999px;">
    <input name="username" type="text" />
    <input name="password" type="password" />
  </div>
  <input name="username" type="text" />
  <input name="password" type="password" />

起初,我尝试添加display:none;但Chrome忽略了这些输入,并自动填充可见的输入。