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


当前回答

添加

autocomplete=“关闭”

表单标记将禁用浏览器对该特定表单中所有输入字段的自动完成(之前在该字段中键入的内容)。

测试日期:

Firefox 3.5,4测试版Internet Explorer 8铬

其他回答

我尝试了几乎所有的答案,但新版本的Chrome很聪明;如果你写

autocomplete="randomstring" or autocomplete="rutjfkde"

它会自动将其转换为

autocomplete="off"

当输入控件接收到焦点时。

所以,我使用jQuery完成了这项工作,我的解决方案如下。

$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
    $(this).attr("autocomplete", "new-password");
})

这是最简单的,对于表单上的任何数量的控件都可以做到。

对于React,您可以尝试将此代码放在表单下面或密码输入上面,或者放在电子邮件和密码输入之间

export const HackRemoveBrowsersAutofill = () => (
  <>
    <input type="email" autoComplete="new-password" style={ { display: 'none' } } />
    <input type="password" autoComplete="new-password" style={ { display: 'none' } } />
  </>
)

示例之一:

<input type="email"/>
<HackRemoveBrowsersAutofill/>
<input type="password"/>

Chrome一直试图强制自动完成。所以你需要做一些事情。

输入字段的属性id和名称不需要是可识别的。所以没有姓名、电话、地址等值。

相邻的标签或div也需要不可识别。然而,您可能会想,用户如何知道?好吧,在使用内容后,您可以使用::做一个有趣的小技巧。你可以将其设置为字母。

<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>

<style>
  span.o {
    content: 'o';
  }
</style>

您可以在属性name how电子邮件地址中向表单添加名称,并生成电子邮件值。例如:

<form id="something-form">
  <input style="display: none" name="email" value="randomgeneratevalue"></input>
  <input type="password">
</form>

如果使用此方法,Google Chrome将无法插入自动填充密码。

在尝试了所有解决方案之后(有些解决方案部分奏效,禁用自动填充但不自动完成,有些根本不奏效),我找到了截至2020年的最佳解决方案,将type=“search”和autocomplete=“off”添加到输入元素中。这样地:

<input type="search" /> or <input type="search" autocomplete="off" />

还要确保表单元素具有autocomplete=“off”。这非常有效,并禁用自动完成和自动填充。

此外,如果您使用type=“email”或任何其他文本类型,则需要添加autocomplete=“new email”,这将完全禁用两者。type=“password”也是如此。只需将“new-”前缀与类型一起添加到自动完成中即可。这样地:

<input type="email" autocomplete="new-email" />
<input type="password" autocomplete="new-password" />