Html 禁用 Chrome 自动填充

Disabling Chrome Autofill

提问by templaedhel

I have been running into issues with the chrome autofill behavior on several forms.

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

The fields in the form all have very common and accurate names, such as "email", "name", or "password", and they also have autocomplete="off"set.

表单中的字段都有非常常见和准确的名称，例如“电子邮件”、“姓名”或“密码”，并且它们也有autocomplete="off"设置。

The autocomplete flag has successfully disabled the autocomplete behavior, where a dropdown of values appear as you start typing, but has not changed the values that Chrome auto-populates the fields as.

自动完成标志已成功禁用自动完成行为，其中在您开始键入时会显示值的下拉列表，但并未更改 Chrome 自动填充字段的值。

This behavior would be ok except that chrome is filling the inputs incorrectly, for example filling the phone input with an email address. Customers have complained about this, so it's verified to be happening in multiple cases, and not as some some sort of result to something that I've done locally on my machine.

这种行为是可以的，除了 chrome 错误地填充输入，例如用电子邮件地址填充电话输入。客户对此有所抱怨，因此已证实在多种情况下都会发生这种情况，而不是我在本地机器上完成的某些事情的某种结果。

The only current solution I can think of is to dynamically generate custom input names and then extract the values on the backend, but this seems like a pretty hacky way around this issue. Are there any tags or quirks that change the autofill behavior that could be used to fix this?

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

回答by tibalt

For new Chrome versions you can just put autocomplete="new-password"in your password field and that's it. I've checked it, works fine.

对于新的 Chrome 版本，您只需autocomplete="new-password"输入密码字段即可。我已经检查过了，工作正常。

Got that tip from Chrome developer in this discussion: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

在这次讨论中从 Chrome 开发人员那里得到了这个提示：https: //bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

P.S. Note that Chrome will attempt to infer autofill behavior from name, id and any text content it can get surrounding the field including labels and arbitrary text nodes. If there is a autocomplete token like street-addressin context, Chrome will autofill that as such. The heuristic can be quite confusing as it sometimes only trigger if there are additional fields in the form, or not if there are too few fields in the form. Also note that autocomplete="no"will appear to work but autocomplete="off"will not for historical reasons. autocomplete="no"is you telling the browser that this field should be auto completed as a field called "no". If you generate unique random autocompletenames you disable auto complete.

PS 请注意，Chrome 将尝试从名称、ID 和它可以在字段周围获取的任何文本内容（包括标签和任意文本节点）推断自动填充行为。如果有像street-address上下文一样的自动完成标记，Chrome 将自动填充它。启发式方法可能非常令人困惑，因为它有时仅在表单中有其他字段时才触发，或者在表单中的字段太少时不会触发。另请注意，autocomplete="no"这似乎有效，但autocomplete="off"由于历史原因而无效。autocomplete="no"您是在告诉浏览器该字段应该作为名为"no". 如果您生成唯一的随机autocomplete名称，则会禁用自动完成功能。

If your users have visited bad forms their autofill information may be corrupt. Having them manually go in and fix their autofill information in Chrome may be a necessary action from them to take.

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

回答by mike nelson

I've just found that if you have a remembered username and password for a site, the current version of Chrome will autofill your username/email address into the field beforeany type=passwordfield. It does not care what the field is called - just assumes the field before password is going to be your username.

我刚刚发现，如果您记住了某个网站的用户名和密码，当前版本的 Chrome 会在任何type=password字段之前自动填充您的用户名/电子邮件地址。它不关心该字段的名称 - 只需假设密码之前的字段将成为您的用户名。

Old Solution

旧解决方案

Just use <form autocomplete="off">and it prevents the password prefilling as well as any kind of heuristic filling of fields based on assumptions a browser may make (which are often wrong). As opposed to using <input autocomplete="off">which seems to be pretty much ignored by the password autofill (in Chrome that is, Firefox does obey it).

只需使用<form autocomplete="off">它就可以防止密码预填充以及基于浏览器可能做出的假设（通常是错误的）的任何类型的字段启发式填充。与使用<input autocomplete="off">密码自动填充似乎几乎忽略了相反（在 Chrome 中，Firefox 确实遵守它）。

Updated Solution

更新的解决方案

Chrome now ignores <form autocomplete="off">. Therefore my original workaround (which I had deleted) is now all the rage.

Chrome 现在忽略<form autocomplete="off">. 因此，我最初的解决方法（我已删除）现在风靡一时。

Simply create a couple of fields and make them hidden with "display:none". Example:

只需创建几个字段并使用“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"/>

Then put your real fields underneath.

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

Remember to add the comment or other people on your team will wonder what you are doing!

请记住添加评论，否则您团队中的其他人会想知道您在做什么！

Update March 2016

2016 年 3 月更新

Just tested with latest Chrome - all good. This is a fairly old answer now but I want to just mention that our team has been using it for years now on dozens of projects. It still works great despite a few comments below. There are no problems with accessibility because the fields are display:nonemeaning they don't get focus. As I mentioned you need to put them beforeyour real fields.

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

If you are using javascript to modify your form, there is an extra trick you will need. Show the fake fields while you are manipulating the form and then hide them again a millisecond later.

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

Example code using jQuery (assuming you give your fake fields a class):

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

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

Update July 2018

2018 年 7 月更新

My solution no longer works so well since Chrome's anti-usability experts have been hard at work. But they've thrown us a bone in the form of:

由于 Chrome 的反可用性专家一直在努力工作，因此我的解决方案不再有效。但是他们以以下形式向我们扔了一块骨头：

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

This works and mostly solves the problem.

这有效并且主要解决了问题。

However, it does not work when you don't have a password field but only an email address. That can also be difficult to get it to stop going yellow and prefilling. The fake fields solution can be used to fix this.

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

In fact you sometimes need to drop in two lots of fake fields, and try them in different places. For example, I already had fake fields at the beginning of my form, but Chrome recently started prefilling my 'Email' field again - so then I doubled down and put in more fake fields just before the 'Email' field, and that fixed it. Removing either the first or second lot of the fields reverts to incorrect overzealous autofill.

事实上，你有时需要放入两批假字段，并在不同的地方尝试它们。例如，我的表单开头已经有假字段，但 Chrome 最近又开始预填我的“电子邮件”字段 - 所以我加倍并在“电子邮件”字段之前添加了更多假字段，然后修复了它. 删除第一批或第二批字段将恢复为不正确的过度热心的自动填充。

Update Mar 2020

2020 年 3 月更新

It is not clear if and when this solution still works. It appears to still work sometimes but not all the time.

目前尚不清楚此解决方案是否以及何时仍然有效。它有时似乎仍然有效，但并非总是如此。

In the comments below you will find a few hints. One just added by @anilyeni may be worth some more investigation:

在下面的评论中，您会发现一些提示。@anilyeni 刚刚添加的一个可能值得更多调查：

As I noticed, autocomplete="off"works on Chrome 80, IF there is less than 3 elements in <form>. I don't know what is the logic or where the related documentation about it.

正如我注意到的，autocomplete="off"适用于 Chrome 80，如果<form>. 我不知道逻辑是什么，也不知道相关文档在哪里。

Also this one from @dubrox may be relevant, although I have not tested it:

来自@dubrox 的这个也可能是相关的，尽管我还没有测试过它：

thanks a lot for the trick, but please update the answer, as display:none;doesn't work anymore, but position: fixed;top:-100px;left:-100px; width:5px;does :)

非常感谢您的技巧，但请更新答案，因为display:none;不再有效，但position: fixed;top:-100px;left:-100px; width:5px;可以:)

Update APRIL 2020

2020 年 4 月更新

Special value for chrome for this attribute is doing the job: (tested on input - but not by me) autocomplete="chrome-off"

此属性的 chrome 的特殊值正在完成工作：（在输入中测试 - 但不是由我测试） autocomplete="chrome-off"

回答by Kaszoni Ferencz

After months and months of struggle, I have found that the solution is a lot simpler than you could imagine:

经过数月的挣扎，我发现解决方案比您想象的要简单得多：

Instead of autocomplete="off"use autocomplete="false";)

而不是autocomplete="off"使用autocomplete="false";)

As simple as that, and it works like a charm in Google Chrome as well!

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

---

---

August 2019 update (credit to @JonEdiger in comments)

2019 年 8 月更新（感谢@JonEdiger 在评论中）

Note: lots of info online says the browsers now treat autocomplete='false' to be the same as autocomplete='off'. At least as of right this minute, it is preventing autocomplete for those three browsers.

注意：很多在线信息说浏览器现在将 autocomplete='false' 视为与 autocomplete='off' 相同。至少就目前而言，它正在阻止这三个浏览器的自动完成。

Set it at form level and then for the inputs you want it off, set to some non-valid value like 'none':

将它设置在表单级别，然后对于您想要关闭的输入，设置为一些无效值，如“none”：

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

回答by dsuess

Sometimes even autocomplete=offwon't prevent filling in credentials into wrong fields.

有时甚至autocomplete=off不会阻止将凭据填写到错误的字段中。

A workaround is to disable browser autofill using readonly-mode and set writable on focus:

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

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

The focusevent occurs at mouse clicks and tabbing through fields.

该focus事件发生在鼠标单击和通过字段切换时。

Update:

更新：

Mobile Safari sets cursor in the field, but does not show virtual keyboard. This new workaround works like before, but handles virtual keyboard:

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();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

// 更新结束

Explanation:Browser auto fills credentials to wrong text field?

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

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

错误地填写输入，例如用电子邮件地址填写电话输入

Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form.I guess, the browser looks for a password field to insert your saved credentials. Then it autofills usernameinto the nearest textlike-input field , that appears prior the password fieldin DOM (just guessing due to observation). As the browser is the last instance and you can not control it,

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

This readonly-fix above worked for me.

上面的这个只读修复对我有用。

回答by dana

If you are implementing a search box feature, try setting the typeattribute to searchas follows:

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

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

This is working for me on Chrome v48 and appears to be legitimate markup:

这在 Chrome v48 上对我有用，并且似乎是合法的标记：

https://www.w3.org/wiki/HTML/Elements/input/search

https://www.w3.org/wiki/HTML/Elements/input/search

回答by Jobin Jose

Try this. I know the question is somewhat old, but this is a different approach for the problem.

尝试这个。我知道这个问题有点老，但这是解决问题的不同方法。

I also noticed the issue comes just above the passwordfield.

我还注意到这个问题就在password现场上方。

I tried both the methods like

我尝试了两种方法

<form autocomplete="off">and <input autocomplete="off">but none of them worked for me.

<form autocomplete="off">并且<input autocomplete="off">但是他们没有为我工作。

So I fixed it using the snippet below - just added another text field just above the password type field and made it display:none.

所以我使用下面的代码段修复了它 - 只是在密码类型字段上方添加了另一个文本字段并制作了它display:none。

Something like this:

像这样的东西：

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

Hope it will help someone.

希望它会帮助某人。

回答by Tauras

I don't know why, but this helped and worked for me.

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

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

I have no idea why, but autocompelete="new-password"disables autofill. It worked in latest 49.0.2623.112chrome version.

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

回答by Kuf

For me, simple

对我来说，简单

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

Did it.

做到了。

Tested on multiple versions, last try was on 56.0.2924.87

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

回答by Hitesh Kalwani

You have to add this attribute :

您必须添加此属性：

autocomplete="new-password"

Source Link : Full Article

来源链接：全文

回答by Fareed Alnamrouti

It is so simple and tricky :)

它是如此简单和棘手:)

google chrome basically search for every first visible password elementinside the <form>, <body>and <iframe>tags to enable auto refill for them, so to disable this you need to add a dummy password element as the following:

谷歌浏览器基本搜索每一个可见密码元素里面<form>，<body>并<iframe>标记为他们启用自动重填充，所以禁用此，你需要一个虚拟的密码元素添加为以下几点：

1. • if your password element inside a <form>tag you need to put the dummy element as the first element in your form immediately after <form>open tag

   • if your password element not inside a <form>tag put the dummy element as the first element in your html page immediately after <body>open tag

2. You need to hide the dummy element without using css display:noneso basically use the following as a dummy password element.

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
   

1. • 如果您的密码元素位于<form>标签内，您需要在<form>打开标签后立即将虚拟元素作为表单中的第一个元素

   • 如果您的密码元素不在<form>标签内，请在<body>打开标签后立即将虚拟元素作为 html 页面中的第一个元素

2. 您需要在不使用 css 的情况下隐藏虚拟元素，display:none因此基本上使用以下作为虚拟密码元素。

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>