禁用Chrome自动填充

Question

我在几个表单上遇到了chrome自动填充行为的问题。

表单中的字段都有非常常见和准确的名称，如“email”、“name”或“password”，它们还设置了autocomplete=“off”。

autocomplete标志已成功禁用了autocomplete行为，在该行为中，当您开始键入时会显示下拉值，但没有更改Chrome将字段自动填充为的值。

这个行为是可以的，除非chrome不正确地填充输入，例如用电子邮件地址填充电话输入。客户已经抱怨了这一点，所以它被证实是在多个情况下发生的，而不是我在本地机器上所做的事情的某种结果。

目前我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是解决这个问题的一个非常诡异的方法。是否有任何标签或怪癖可以改变自动填充行为，以解决此问题？

Answer 1

我刚刚发现，如果你记住了一个站点的用户名和密码，当前版本的Chrome会自动将你的用户名/电子邮件地址填入任何type=password字段之前的字段。它并不关心该字段被称为什么--只是假设password之前的字段是您的用户名。

旧解决方案

只需使用

就可以防止密码预填充，以及基于浏览器可能做出的假设（这些假设通常是错误的）对字段进行任何类型的启发式填充。与使用 相反，后者似乎被密码自动填充忽略了（也就是说，在Chrome中，Firefox遵守它）。

更新的解决方案

Chrome现在忽略。因此，我最初的变通办法（我已经删除了）现在风靡一时。

只需创建几个字段，并用“display：none”隐藏它们。示例：

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display: none" type="text" name="fakeusernameremembered" />
<input style="display: none" type="password" name="fakepasswordremembered" />

然后把你真正的领域放在下面。

记住添加评论，否则团队中的其他人会好奇你在做什么！

2016年3月更新

刚刚用最新的Chrome测试-一切都很好。这是一个相当古老的答案，但我只想提到，我们的团队已经在几十个项目中使用了多年。尽管下面有一些评论，但它仍然很有效。可访问性没有问题，因为字段是display:none，这意味着它们没有获得焦点。正如我提到的，你需要把它们放在你真正的领域之前。

如果您正在使用javascript修改表单，那么您将需要一个额外的技巧。在操作窗体时显示假字段，然后在一毫秒后再次隐藏它们。

使用jQuery的示例代码（假设给假字段一个类）：

$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
  $(".fake-autofill-fields").hide();
}, 1);

2018年7月更新

我的解决方案不再那么好用了，因为Chrome的反可用性专家一直在努力工作。但他们给了我们一根骨头：

<input type="password" name="whatever" autocomplete="new-password" />

这很管用，基本上解决了问题。

但是，当您没有密码字段而只有电子邮件地址时，它就不起作用了。这也可能很难使它停止变黄和预填充。假字段解决方案可用于修复此问题。

事实上，你有时需要在两个假字段，并尝试他们在不同的地方。例如，我在表单的开头已经有了假字段，但是Chrome最近又开始预填充我的“email”字段了--所以我就在“email”字段之前加了更多的假字段，这就修复了它。删除第一批或第二批字段将返回到不正确的过度狂热的自动填充。

2020年3月更新

目前尚不清楚这一解决方案是否以及何时仍然有效。它似乎有时仍然起作用，但不是一直起作用。

在下面的评论中，你会发现一些提示。@anilyeni刚刚补充的一条或许值得再多加点考察：

正如我所注意到的，如果中的元素少于三个，autocomplete=“off”可以在Chrome 80上工作。我不知道逻辑是什么，也不知道相关文档在哪里。

同样来自@dubrox的这一条可能也是相关的，虽然我没有测试过：

非常感谢这个技巧，但请更新答案，因为显示：无；不再起作用，但位置：固定；top:-100px；left:-100px；宽度:5px；执行：）

2020年4月更新

此属性的chrome的特殊值正在执行此任务：（在输入时测试-但不是由我测试）autocomplete=“chrome-off”

Answer 2

2021年1月:autocomplete=“off”现在可以正常工作（在Chrome 88 macOS上测试）。

2020年9月:autocomplete=“chrome-off”禁用Chrome自动填充。

原答案，2015年：

对于新的Chrome版本，您只需在密码字段中添加autocomplete=“new-password”即可。我检查过了，没问题。

在此讨论中，我从Chrome开发人员处获得了提示：https://bugs.chromium.org/p/chromium/issues/detail?id=370363c7

附注。请注意，Chrome将尝试从名称、id和字段周围的任何文本内容（包括标签和任意文本节点）来推断自动填充行为。如果上下文中有类似street-address的自动完成令牌，Chrome将自动填充。启发式可能会很混乱，因为它有时只在窗体中有其他字段时触发，或者在窗体中有太少的字段时不触发。还请注意，autocomplete=“no”似乎可以工作，但由于历史原因，autocomplete=“off”不能工作。autocomplete=“no”是告诉浏览器该字段应自动完成为名为“no”的字段。如果生成唯一的随机自动完成名称，则禁用自动完成。

如果您的用户访问了错误的表单，他们的自动填充信息可能已损坏。让他们手动进入和修复他们的自动填充信息在Chrome可能是一个必要的行动从他们采取。