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


当前回答

只需将值为“off”的属性autocomplete设置为输入类型。

<input type="password" autocomplete="off" name="password" id="password" />

其他回答

在尝试了所有解决方案之后(有些解决方案部分奏效,禁用自动填充但不自动完成,有些根本不奏效),我找到了截至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" />

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

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

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

我在一个表单上遇到了问题,其中包含用户名和电子邮件的输入字段,而电子邮件正好在用户名之后。Chrome会自动将我当前的网站用户名填入电子邮件字段,并将重点放在该字段上。这并不理想,因为它是一种向web应用程序添加新用户的表单。

看起来,如果您有两个输入,一个接一个,其中第一个输入的标签或ID中包含“用户名”或用户名,而下一个输入的商标或ID中则包含“电子邮件”一词,chrome将自动填充电子邮件字段。

对我来说,解决问题的是将输入的ID更改为不包含这些单词。我还必须设置标签的文本转换为空字符串,并使用javascript settimeout函数将标签更改回0.01秒后的状态。

setTimeout(function () { document.getElementById('id_of_email_input_label').innerHTML = 'Email:'; }, 10);

如果您遇到任何其他输入字段被错误自动填充的问题,我会尝试此方法。

始终有效的解决方案

我用随机字符解决了与谷歌Chrome的无休止斗争。当您总是使用随机字符串呈现自动完成时,它将永远不会记住任何内容。

<input name="name" type="text" autocomplete="rutjfkde">

希望这对其他人有所帮助。

2022年更新:

Chrome做出了这一改进:autocomplete=“新密码”,这将解决这个问题,但我不确定,如果一段时间后Chrome再次将其更改为不同的功能。

不要使用JAVASCRIPT修复此问题!!

首先使用HTML解决此问题,以防浏览器未使用脚本、无法使用您的脚本版本或脚本已关闭。请始终在HTML之上最后一层脚本。

对于具有“text”类型属性的常规输入表单字段,请在元素上添加autocomplete=“off”。由于用户浏览器覆盖设置,这可能在现代HTML5浏览器中不起作用,但它会照顾到许多旧浏览器,并停止大多数浏览器中的自动完成下拉选项。注意,我还包括了所有其他可能会让用户感到不快的自动完成选项,如autocapitalize=“off”、autocorrect=“off”和spellcheck=“false”。许多浏览器不支持这些功能,但它们增加了额外的“附加”功能,这会让数据输入人员感到烦恼。注意,例如,如果用户的浏览器设置为启用了自动填充,Chrome会忽略“关闭”。因此,实现浏览器设置可以覆盖此属性。

例子:

<input type="text" id="myfield" name="myfield" size="20" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter something here..." title="Enter Something" aria-label="Something" required="required" aria-required="true" />

对于用户名和密码输入类型字段,对于触发“关闭”功能的更具体的自动完成属性,浏览器的支持有限。用于登录的文本输入上的autocomplete=“username”将迫使某些浏览器重置并删除自动完成功能。autocomplete=“new password”将尝试使用“password”类型输入字段对密码执行相同操作。(见下文)。然而,这些是特定浏览器的专有技术,在大多数情况下都会失败。不支持这些功能的浏览器包括Internet Explorer 1-11、许多Safari和Opera桌面浏览器,以及一些版本的iPhone和Android默认浏览器。但它们提供了额外的力量来尝试并强制删除自动完成。

例子:

<input type="text" id="username" name="username" size="20" value="" autocomplete="username" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter username here..." title="Enter Username" aria-label="Username" required="required" aria-required="true" />
<input type="password" id="password" name="password" size="20" minlength="8" maxlength="12" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}" value="" autocomplete="new-password" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter password here..." title="Enter Password: (8-12) characters, must contain one number, one uppercase and lowercase letter" aria-label="Password" required="required" aria-required="true" />

现在寻找更好的解决方案!

由于标准机构和浏览器对HTML5的支持分散,许多现代HTML5属性在许多浏览器中都失败了。所以,一些孩子转向脚本来填补这些漏洞。但这是懒惰的编程。使用JavaScript隐藏或重写HTML会使情况变得更糟,因为您现在有一层又一层的脚本依赖关系,再加上HTML补丁。避免这种情况!

要在表单和字段中永久禁用此功能,最好的方法是每次在“input”元素上创建一个自定义的“id”/“name”值,使用一个唯一的值,如连接到字段id和name属性的日期或时间,并确保它们匹配(例如“name=password_{date}”)。

<input type="text" id="password_20211013" name="password_20211013" />

这破坏了愚蠢的浏览器自动完成选择算法,该算法会嗅探触发这些字段过去值的匹配名称。通过这样做,浏览器无法将以前表单数据的缓存与您的匹配。它将强制关闭“自动完成”,或显示空白列表,并且不再显示任何以前的密码!在服务器端,您可以创建这些自定义输入“命名”字段,并通过简单地解析id/name的第一部分,从用户浏览器的响应中识别和提取正确的字段。例如“password_”或“username_”等。当字段的“name”值出现时,只需解析第一部分(“password_{date}”)并忽略其余部分,然后在服务器上提取值。

容易的