关于html：禁用Chrome自动填充功能


Disabling Chrome Autofill

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

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

autocomplete标志已成功禁用autocomplete行为，在该行为中，当您开始键入时，值的下拉列表会出现，但不会更改chrome自动填充字段的值。

除了Chrome错误地填充了输入内容(例如，使用电子邮件地址填充了电话输入内容)，这种行为是正常的。客户抱怨过这一点，因此它被证实是在多种情况下发生的，而不是我在本地机器上所做的某种结果。

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

相关讨论

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

从Chrome开发者那里得到了这个提示：https://bugs.chromium.org/p/chromium/issues/detail？ID=370363 C7

另外，不要忘记为不同的字段使用唯一的名称，以防止自动填充。

相关讨论

我刚刚发现，如果您有一个记住的站点用户名和密码，当前版本的chrome会自动将您的用户名/电子邮件地址填充到任何type=password字段之前的字段中。它不关心字段名是什么-只是假设在密码将成为您的用户名之前的字段。

旧解决方案

只需使用

，它就可以防止密码预填充以及基于浏览器可能做出的假设(通常是错误的)的任何类型的启发式字段填充。与使用相反，它似乎被密码自动填充忽略了很多(在chrome中，firefox确实遵守它)。

更新的解决方案

chrome现在忽略了

。因此，我原来的解决方法(我删除了)现在非常流行。

只需创建几个字段，并用"display:none"隐藏它们。例子：

1
2
3
<!-- 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月更新

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

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

使用jquery的示例代码(假设您给您的假字段一个类)：

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

号

更新日期：2018年7月

由于Chrome的反可用性专家一直在努力工作，我的解决方案就不再那么有效了。但他们已经向我们扔了一块骨头，形状如下：

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

这是可行的，而且主要解决了问题。

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

事实上，你有时需要在两个假领域，并尝试在不同的地方。例如，我在表格的开头就已经有了假字段，但是Chrome最近又开始预先填充我的"电子邮件"字段，所以我在"电子邮件"字段的前面添加了更多的假字段，并修复了它。删除第一批或第二批字段将恢复为不正确的过热自动填充。

相关讨论

经过数月和数月的努力，我发现解决方案比你想象的要简单得多：

用autocomplete="false"代替autocomplete="off"；

就这么简单，它在谷歌Chrome中也很有魅力！

相关讨论

有时甚至autocomplete=off也不能防止在错误的字段中填写凭证。

解决方法是使用只读模式禁用浏览器自动填充，并将焦点设置为可写：

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

focus事件发生在单击鼠标并在字段间切换时。

更新：

MobileSafari在字段中设置光标，但不显示虚拟键盘。这个新的解决方案与以前一样工作，但可以处理虚拟键盘：

1
2
3
4
<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/

//更新结束

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

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

号

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

上面这个只读修复程序对我有效。

相关讨论

试试这个。我知道这个问题有些老套，但这是解决这个问题的另一种方法。

我还注意到这个问题就在password字段的上方。

我试过两种方法

以东十一〔1〕和以东十一〔2〕都没有为我效劳。

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

像这样：

1
2
3
<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="" />

希望它能帮助别人。

相关讨论

如果要实现搜索框功能，请尝试将type属性设置为search如下：

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

这在Chromev48上对我很有效，而且似乎是合法的标记：

https://www.w3.org/wiki/html/elements/input/search/搜索

相关讨论

我不知道为什么，但这对我有帮助，也为我工作。

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

。

我不知道为什么，但是autocompete="new password"会禁用自动填充。最新版本为49.0.2623.112铬合金。

相关讨论

对我来说，简单

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

成功了。

在多个版本上测试，最后一次测试是在56.0.2924.87上。

相关讨论

必须添加此属性：

1
autocomplete="new-password"

。

源链接：全文

相关讨论

这是如此简单和棘手：)

google chrome基本上搜索

、和