禁用 Chrome 自动填充

问题描述

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

表单中的字段都具有非常常见且准确的名称，如”email”，”name” 或”password”，并且还具有 autocomplete="off"集。

自动完成标志已成功禁用自动完成行为，当您开始输入时，会显示值的下拉列表，但没有将 Chrome auto-populates 的值更改为。

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

我可以想到的唯一现有的解决方案是动态生成自定义输入名称，然后提取后端的值，但这似乎是一个非常奇怪的方法围绕这个问题。有没有任何标签或怪癖改变自动填充行为，可以用来解决这个问题？

最佳解决方案

我刚刚发现，如果您有一个网站的 memory 用户名和密码，当前版本的 Chrome 会在任何 type=password 字段之前自动填写您的用户名/电子邮件地址。它不在乎什么字段被调用 – 只是假定该字段之前密码将成为您的用户名。

旧解决方案

只需使用<form autocomplete="off">，它可以根据浏览器可能做出的假设 (通常是错误的) 阻止密码预填充以及任何类型的启发式填充字段。而不是使用<input autocomplete="off">，这似乎几乎被密码自动填充忽略 (在 Chrome 中，Firefox 是服从它) 。

更新解决方案

Chrome 现在忽略<form autocomplete="off"> 。所以我原来的解决方法 (我已经删除) 现在都是愤怒。

只需创建几个字段，并使用”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);

次佳解决方案

对于新的 Chrome 版本，您可以将 autocomplete="new-password"放在您的密码字段中，就是这样。我检查了，工作正常。

在 Chrome 开发人员的讨论中提到了这个提示：https://code.google.com/p/chromium/issues/detail?id=370363#c7

附：不要忘记使用不同字段的唯一名称来防止自动填充。

第三种解决方案

经过数月和数月的斗争，我发现解决方案比你想像的要简单得多：

代替 autocomplete="off"使用 autocomplete="false"😉

像这样简单，它的作用就像 Google Chrome 中的魅力！

第四种方案

有时甚至 autocomplete = off 不会阻止将凭据填入错误的字段。所以它填补了一些字段，但不是一个用户或昵称！

修复：浏览器自动填入 readonly-mode 并设置可写入焦点

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

//UpdateEnd

说明：浏览器自动将凭据填充到错误的文本字段中？

filling the inputs incorrectly, for example filling the phone input with an email address

有时我注意到这个奇怪的行为在 Chrome 和 Safari 上，当密码字段是相同的形式。我想，浏览器会查找一个密码字段来插入您保存的凭据。然后将用户名自动填写到最接近的 textlike-input 字段中，该字段出现在 DOM 中的密码字段之前 (由于观察而猜测) 。由于浏览器是最后一个实例，您无法控制它，

以上这个 readonly-fix 为我工作。更新：纯 JavaScript，不需要 jQuery 。

第五种方案

尝试这个。我知道这个问题有些古老，但这是一个不同的解决办法。

我也注意到问题出现在 password 字段之上。

我尝试过两种方法

<form autocomplete="off"> 和<input autocomplete="off">，但没有一个为我工作。

所以我使用下面的代码片段来修复它 – 只是在密码类型字段上方添加了另一个文本字段，并将其设置为 display:none 。

这样的事情

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

希望会帮助某人。

第六种方案

我不知道为什么，但这对我来说是有帮助的。

<input type="password" name="pwd" autocomplete="new-password">

我不知道为什么，但 autocompelete = “new-password” 禁用自动填充。它最新的 49.0.2623.112 镀 chrome 版本。

第七种方案

以下是我提出的解决方案，因为 Google 坚持覆盖人们似乎所做的每一个 work-around 。

选项 1 – 选择点击上的所有文字

将输入的值设置为用户 (例如 your@email.com) 的示例或字段的标签 (例如 Email)，并将一个名为 focus-select 的类添加到您的输入中：

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

这里是 jQuery：

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

我真的看不到 Chrome 搞错了价值观。那会很疯狂所以希望这是一个安全的解决方案。

选项 2 – 将电子邮件值设置为空格，然后将其删除

假设您有两个输入，如电子邮件和密码，将电子邮件字段的值设置为" "(一个空格)，并添加属性/值 autocomplete="off"，然后用 JavaScript 清除。您可以将密码值留空。

如果用户因为某些原因没有 JavaScript，请确保您修改其输入 server-side(您可能应该是反正)，以防它们不会删除空格。

这是 jQuery：

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

我设置一个超时到 15，因为 5 似乎在我的测试中偶尔工作，所以三倍数这个数字似乎是一个安全的赌注。

如果没有将初始值设置为空格，Chrome 将输入输入为黄色，就像它具有 auto-filled 一样。

选项 3 – 隐藏输入

把它放在窗体的开始处：

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS：

.hide{ display:none; }

确保您保留 HTML 注释，以便您的其他开发人员不会删除它！还要确保隐藏输入的名称是相关的。

第八种方案

它是如此简单和棘手:)

Google Chrome 基本上搜索<form>，<body> 和<iframe> 标签中的每个第一个可见密码元素，以便为其启用自动重新填充，因此要禁用此功能，您需要添加一个虚拟密码元素，如下所示：

- 如果您的<form> 标签中的密码元素需要在<form> 打开标签后立即将虚拟元素作为表单中的第一个元素
- 如果您的密码元素不在<form> 标签中，则将<body> 打开标签后的第一个元素作为第一个元素放在 html 页面中
您需要隐藏虚拟元素而不使用 css display:none，因此基本上使用以下作为虚拟密码元素。
```
<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
```

第九种方案

对我而言，简单

<form autocomplete="off" role="presentation">

做到了。

测试了多个版本，最后一次尝试是在 56.0.2924.87

第十种方案

我加了一点不同的观点。为什么不 honeypot it to stop Chrome from botting your fields？这似乎对我来说是工作 cross-browser 。值得一试：

Place an input above your other fields you do not want filled. Set the style to display none and the end user will not ever know it’s there. Also no yellow boxes.

<input type="password" style="display:none;">

参考文献

Disabling Chrome Autofill

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。