Html 在 Chrome 63 中禁用自动填充

Disable autofill in Chrome 63

提问by Cellydy

I just updated my browser to Chrome Version 63.0.3239.84 (Official Build) (64-bit).

我刚刚将浏览器更新到 Chrome 版本 63.0.3239.84（官方版本）（64 位）。

I then proceeded to go on my website, where I have a input box with autocomplete='off', yet I still get the following:

然后我继续访问我的网站，在那里我有一个带有 的输入框autocomplete='off'，但我仍然得到以下信息：

(You can see my inbuilt suggestion dropdown below it)

（你可以在它下面看到我的内置建议下拉菜单）

This never used to be the case. Nothing else has changed!

以前从来没有这种情况。其他什么都没变！

Why is this happening? Is this a bug in the new version of chrome? I have tried all other suggestions like autocomplete="false"or applying autocomplete=off to the form too. I have even tried to apply these with jquery after the page has loaded but also no luck.

为什么会这样？这是新版chrome的bug吗？我已经尝试了所有其他建议，例如autocomplete="false"或对表单应用 autocomplete=off。我什至尝试在页面加载后使用 jquery 应用这些，但也没有运气。

I have tested this on multiple machines with the newest version of chrome on different operating systems. The issue persists.

我已经在不同操作系统上使用最新版本的 chrome 的多台机器上对此进行了测试。问题仍然存在。

采纳答案by Solvitieg

Update Feb 2018:

2018 年 2 月更新：

Thanks to @JamesNisbet for pointing this out in the comments.

感谢@JamesNisbet 在评论中指出这一点。

According to the Chrome team, autocomplete="off" and autocomplete="false" will be ignored moving forward. This is not a temporary regression in Chrome.

根据Chrome 团队的说法， autocomplete="off" 和 autocomplete="false" 将被忽略。这不是 Chrome 中的临时回归。

Chrome will attempt to autofill any form fields that follow the WHATWG standard on autocomplete. With one exception, they ignore "off" and "false" values.

Chrome 将尝试自动填充任何遵循WHATWG 标准的自动完成表单字段。除了一个例外，它们会忽略“off”和“false”值。

In summary, to disable autofill, use the autocomplete attribute with a value that is not on the WHATWG list.

总之，要禁用自动填充，请使用 autocomplete 属性和一个不在 WHATWG 列表中的值。

Make your case why you think autocomplete="off" should not be ignored by Chrome in this Chromium thread.

请说明您认为 autocomplete="off" 不应被 Chrome 在此 Chromium 线程中忽略的原因。

---

---

Looks like a possible regression in Chrome 63. In Chrome's original autofill documentation:

看起来像 Chrome 63 中可能的回归。在 Chrome 的原始自动填充文档中：

In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data. So when should you use autocomplete="off"? One example is when you've implemented your own version of autocomplete for search.

过去，许多开发人员会在他们的表单字段中添加 autocomplete="off" 以防止浏览器执行任何类型的自动完成功能。虽然 Chrome 仍然会尊重自动完成数据的这个标签，但它不会尊重自动填充数据。那么什么时候应该使用 autocomplete="off" 呢？一个例子是当您实现了自己的搜索自动完成版本时。

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

They do make a distinction between autocomplete and autofill, although it's not clear they are different.

它们确实区分了自动完成和自动填充，尽管尚不清楚它们是不同的。

Chrome, Safari, and Edge are all attempting to implement autofill but there is no clear standard. They look at the name attribute rather than an explicit, standardized attribute.

Chrome、Safari 和 Edge 都在尝试实现自动填充，但没有明确的标准。他们着眼于名称属性，而不是明确的、标准化的属性。

For now autocomplete="something-new"is a good workaround, although syntactically it makes no sense. This seems to work because the browser can't understand it.

现在autocomplete="something-new"是一个很好的解决方法，尽管在语法上它没有意义。这似乎有效，因为浏览器无法理解它。

回答by Erebus

We tried autocomplete="false"and autocomplete="off", neither work. But something Chrome doesn't understand, like autocomplete="disabled", does seem to work. Strange!

我们试过autocomplete="false"和autocomplete="off"，都不起作用。但是 Chrome 不理解的东西，比如autocomplete="disabled"，似乎确实有效。奇怪的！

Update: this is working as of Chrome 72.

更新：这是从 Chrome 72 开始工作的。

回答by Brandito

2019It seems autocomplete="disabled"works again as of Chrome 72.

2019从autocomplete="disabled"Chrome 72 开始，它似乎又可以工作了。

---

---

SINCE A LOT OF PEOPLE HAVE BEEN DOWNVOTING WITHOUT READING THE COMMENTS:THIS NO LONGER WORKS IN CHROME AS OF 2018 / CHROME 63+relevant: https://bugs.chromium.org/p/chromium/issues/detail?id=587466

由于很多人在没有阅读评论的情况下就投反对票：从2018 年起，这在 Chrome 中不再有效/与 Chrome 63+相关：https: //bugs.chromium.org/p/chromium/issues/detail ? id = 587466

Having autocomplete="false" instead of autocomplete="off" works, you can read more from the Chrome team as to why they did it

使用 autocomplete="false" 而不是 autocomplete="off" 工作，您可以从 Chrome 团队那里阅读更多关于他们为什么这样做的信息

---

---

here:

这里：

https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understandshttps://bugs.chromium.org/p/chromium/issues/detail?id=468153https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zhhj7hCip5chttps://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

https://www.chromium.org/developers/design-documents/form-styles-that-c​​hromium-understands https://bugs.chromium.org/p/chromium/issues/detail?id=468153 https:// groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zhhj7hCip5c https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

回答by ngrn

I've managed to get a working "hack" in Chrome Version 65.0.3325.162 (Official Build) (64-bit).

我设法在 Chrome 版本 65.0.3325.162（官方版本）（64 位）中获得了一个有效的“hack”。

I have to render an input field - hidden so it doesn't affect my page:

我必须呈现一个输入字段 - 隐藏所以它不会影响我的页面：

<input style="display:none;"/>

Then I render my password input field:

然后我呈现我的密码输入字段：

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

So my form ends up looking like:

所以我的表格最终看起来像：

<form>
    <input style="display:none;" />
    <input type="password" autocomplete="new-password" />
    <input type="submit" />
</form>

Importantly, you cannot add a name or an id attribute to your password type input element, and you must have autocomplete="new-password"

重要的是，您不能向密码类型输入元素添加名称或 id 属性，并且您必须具有 autocomplete="new-password"

回答by ngrn

After Chrome 63 it looks like they changed it to autocomplete="disabled"

在 Chrome 63 之后，看起来他们将其更改为 autocomplete="disabled"

I recommend you get a browser detecting library and for the rest of it use autocomplete="off"

我建议您使用浏览器检测库，其余部分使用 autocomplete="off"

回答by Tommy

Looks like chrome looks for the closest "label" html tag to the input, and analyzes the label's value/html to affect the input's autofill.

看起来 chrome 会寻找最接近输入的“标签”html 标签，并分析标签的值/html 以影响输入的自动填充。

The cleanest workaround I found to disable the input's autofill was this:

我发现禁用输入自动填充的最干净的解决方法是：

<label for="">Country</label>
<label for="" style="display: none;">hidden label to mislead chrome autocomplete</label>
<input ... />

回答by iamwoor

As Chrome is never going to work properly and/or keeps changing its mind (I know its not human) the simplest solution to ensure autofill/autocomplete stops is to do the following on any inputs you dont want autofilled:

由于 Chrome 永远不会正常工作和/或不断改变主意（我知道它不是人类），确保自动填充/自动完成停止的最简单解决方案是对您不希望自动填充的任何输入执行以下操作：

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

回答by samuelj90

I feel terrible how different browsers use different options in a same functionality.

我感到很糟糕，不同的浏览器在相同的功能中使用不同的选项。

If it's chrome, use autocomplete="disabled" which handles both autocomplete and address based autofill (two separate things):

如果是 chrome，请使用 autocomplete="disabled" 来处理自动完成和基于地址的自动填充（两个独立的事情）：

element.autocomplete = isGoogleChrome() ? 'disabled' :  'off';

You can get some insight on how to writ isGoogleChrome() from here

您可以从这里了解如何编写 isGoogleChrome()

JavaScript: How to find out if the user browser is Chrome?

JavaScript：如何确定用户浏览器是否为 Chrome？

回答by Karan Vyas

For Angular users, Since the autocomplete = 'off'ignore by new chrome versions, chrome developer suggests autocomplete= 'false | random-string', so the google chrome/modern browsers have 2 type of users helpers -

对于 Angular 用户，由于autocomplete = 'off'新 chrome 版本的忽略，chrome 开发人员建议autocomplete= 'false | random-string'，所以 google chrome/现代浏览器有两种类型的用户助手 -

1. autocomplete='off' (which prevents last cached suggestions).
2. autocomplete = 'false | random-string' (which prevents autofill setting, since the 'random-string' is not known by the browser).

1. autocomplete='off'（防止最后缓存的建议）。
2. 自动完成 = '假 | random-string'（阻止自动填充设置，因为浏览器不知道 'random-string'）。

so what to do, in case of disabling both the annoying suggestions? Here is the trick:-

那么怎么办，万一禁用这两个烦人的建议呢？这是诀窍：-

add autocomplete = 'off'in every input fields. (or simple Jquery).

添加autocomplete = 'off'每个输入字段。（或简单的 Jquery）。

$("input").attr('autocomplete', 'off');

Remove the <form name='form-name'>tag from HTML code and add ng-form = 'form-name'in your <div>container. adding ng-form="form-name"will also retain all your validations.

<form name='form-name'>从 HTML 代码中删除标记并添加ng-form = 'form-name'到您的<div>容器中。添加ng-form="form-name"还将保留您的所有验证。

回答by lufc

I fixed this on my site by replacing the offending input element with

我通过将有问题的输入元素替换为

<p class="input" contenteditable="true">&nbsp;</p>

and using jQuery to populate a hidden field prior to submission.

并在提交之前使用 jQuery 填充隐藏字段。

But this is a truly awful hack made necessary by a bad decision at Chromium.

但由于 Chromium 的一个错误决定，这是一个真正可怕的黑客攻击。