Html Chrome 忽略自动完成=“关闭”

Chrome ignores autocomplete="off"

提问by Mr Fett

I've created a web application which uses a tagbox drop down. This works great in all browsers except Chrome browser (Version 21.0.1180.89).

我创建了一个使用 tagbox 下拉菜单的 Web 应用程序。这适用于除 Chrome 浏览器（版本 21.0.1180.89）以外的所有浏览器。

Despite both the inputfields AND the formfield having the autocomplete="off"attribute, Chrome insists on showing a drop down history of previous entries for the field, which is obliterating the tagbox list.

尽管input字段和form字段都具有该autocomplete="off"属性，但 Chrome 坚持显示该字段以前条目的下拉历史记录，这会消除标记框列表。

回答by Diogo Cid

UPDATE

更新

It seems now Chrome ignores the style="display: none;"or style="visibility: hidden;attributes.

现在看来 Chrome 忽略了style="display: none;"orstyle="visibility: hidden;属性。

You can change it to something like:

您可以将其更改为：

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

In my experience, Chrome only autocompletes the first <input type="password">and the previous <input>. So I've added:

根据我的经验，Chrome 只会自动完成第一个<input type="password">和前一个<input>. 所以我补充说：

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

To the top of the <form>and the case was resolved.

到了上面，<form>案子就解决了。

回答by Cava

Prevent autocomplete of username (or email) and password:

防止自动完成用户名（或电子邮件）和密码：

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

---

---

Prevent autocomplete a field (might not work):

防止自动完成字段（可能不起作用）：

<input type="text" name="field" autocomplete="nope">

Explanation:

解释：

autocompletestill works on an <input>despite having autocomplete="off", but you can change offto a random string, like nope.

autocomplete<input>尽管有autocomplete="off"，但仍然适用于，但您可以更改off为随机字符串，例如nope。

---

---

Others "solutions"for disabling the autocomplete of a field (it's not the right way to do it, but it works):

其他禁用字段自动完成的“解决方案”（这不是正确的方法，但它有效）：

1.

1.

HTML:

HTML：

<input type="password" id="some_id" autocomplete="new-password">

JS (onload):

JS（加载）：

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

or using jQuery:

或使用jQuery：

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

---

---

2.

2.

HTML:

HTML：

<form id="form"></form>

JS (onload):

JS（加载）：

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

or using jQuery:

或使用jQuery：

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

---

---

To add more than one field using jQuery:

使用 jQuery 添加多个字段：

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>

---

---

Works in:

工作于：

• Chrome: 49+

• Firefox: 44+

• 铬：49+

• 火狐：44+

回答by ice cream

It appears that Chrome now ignores autocomplete="off"unless it is on the <form autocomplete="off">tag.

看来 Chrome 现在会忽略，autocomplete="off"除非它在<form autocomplete="off">标签上。

回答by Fizzix

Modern Approach

现代方法

Simply make your input readonly, and on focus, remove it. This is a very simple approach and browsers will not populate readonlyinputs. Therefore, this method is accepted and will never be overwritten by future browser updates.

只需输入您的输入readonly，然后在焦点上将其删除。这是一种非常简单的方法，浏览器不会填充readonly输入。因此，此方法被接受，并且永远不会被未来的浏览器更新覆盖。

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

The next part is optional. Style your input accordingly so that it does not look like a readonlyinput.

下一部分是可选的。相应地设置输入样式，使其看起来不像readonly输入。

input[readonly] {
     cursor: text;
     background-color: #fff;
}

WORKING EXAMPLE

工作实例

回答by J.T. Taylor

For a reliable workaround, you can add this code to your layout page:

要获得可靠的解决方法，您可以将此代码添加到布局页面：

<div style="display: none;">
 <input type="text" id="PreventChromeAutocomplete" 
  name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Chrome respects autocomplete=off only when there is at least one other input element in the form with any other autocomplete value.

仅当表单中至少有一个其他输入元素具有任何其他自动完成值时，Chrome 才会尊重 autocomplete=off。

This will not work with password fields--those are handled very differently in Chrome. See https://code.google.com/p/chromium/issues/detail?id=468153for more details.

这不适用于密码字段——这些在 Chrome 中的处理方式非常不同。有关更多详细信息，请参阅https://code.google.com/p/chromium/issues/detail?id=468153。

UPDATE: Bug closed as "Won't Fix" by Chromium Team March 11, 2016. See last comment in my originally filed bug report, for full explanation. TL;DR: use semantic autocomplete attributes such as autocomplete="new-street-address" to avoid Chrome performing autofill.

更新：Chromium 团队于 2016 年 3 月 11 日以“无法修复”的形式关闭了错误。请参阅我最初提交的错误报告中的最后一条评论，以获得完整的解释。TL;DR：使用语义自动完成属性，例如 autocomplete="new-street-address" 来避免 Chrome 执行自动填充。

回答by Hooligancat

Well, a little late to the party, but it seems that there is a bit of misunderstanding about how autocompleteshould and shouldn't work. According to the HTML specifications, the user agent (in this case Chrome) can override autocomplete:

好吧，聚会有点晚了，但似乎对autocomplete应该和不应该如何工作存在一些误解。根据 HTML 规范，用户代理（在本例中为 Chrome）可以覆盖autocomplete：

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

A user agent may allow the user to override an element's autofill field name, e.g. to change it from "off" to "on" to allow values to be remembered and prefilled despite the page author's objections, or to always "off", never remembering values. However, user agents should not allow users to trivially override the autofill field name from "off" to "on" or other values, as there are significant security implications for the user if all values are always remembered, regardless of the site's preferences.

用户代理可以允许用户覆盖元素的自动填充字段名称，例如将其从“关闭”更改为“开启”以允许在页面作者反对的情况下记住和预填充值，或者始终“关闭”，从不记住值。但是，用户代理不应允许用户将自动填充字段名称从“关闭”改为“打开”或其他值，因为如果始终记住所有值，无论站点的偏好如何，都会对用户产生重大的安全影响。

So in the case of Chrome, the developers have essentially said "we will leave this to the user to decide in their preferences whether they want autocompleteto work or not. If you don't want it, don't enable it in your browser".

因此，就 Chrome 而言，开发人员基本上说“我们将让用户根据他们的偏好决定是否要autocomplete工作。如果你不想要它，请不要在浏览器中启用它” .

However, it appears that this is a little over-zealous on their part for my liking, but it is the way it is. The specification also discusses the potential security implications of such a move:

然而，这似乎对我来说有点过分热情，但事实就是如此。该规范还讨论了这一举动的潜在安全影响：

The "off" keyword indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.

“off”关键字表示控件的输入数据特别敏感（例如核武器的激活码）；或者它是一个永远不会被重用的值（例如用于银行登录的一次性密钥），因此用户每次都必须明确输入数据，而不是能够依靠 UA 来预填充对他的价值；或者文档提供了自己的自动完成机制并且不希望用户代理提供自动完成值。

So after experiencing the same frustration as everyone else, I found a solution that works for me. It is similar in vein to the autocomplete="false"answers.

所以在经历了和其他人一样的挫折之后，我找到了一个适合我的解决方案。它与autocomplete="false"答案的脉络相似。

A Mozilla article speaks to exactly this problem:

Mozilla 的一篇文章正好说明了这个问题：

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

In some case, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really force the no-completion is to assign a random string to the attribute

在某些情况下，即使自动完成属性设置为关闭，浏览器也会不断建议自动完成值。对于开发人员来说，这种意外行为可能令人费解。真正强制不完成的技巧是为属性分配一个随机字符串

So the following code shouldwork:

所以下面的代码应该可以工作：

autocomplete="nope"

And so should each of the following:

以下各项也应如此：

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

The issue I see is that the browser agent might be smart enough to learn the autocompleteattribute and apply it next time it sees the form. If it does do this, the only way I can see to still get around the problem would be to dynamically change the autocompleteattribute value when the page is generated.

我看到的问题是浏览器代理可能足够聪明，可以学习该autocomplete属性并在下次看到表单时应用它。如果这样做，我认为仍然可以解决问题的唯一方法autocomplete是在生成页面时动态更改属性值。

One point worth mentioning is that many browser will ignore autocompletesettings for login fields (username and password). As the Mozilla article states:

值得一提的一点是，许多浏览器会忽略autocomplete登录字段（用户名和密码）的设置。正如 Mozilla 文章所述：

For this reason, many modern browsers do not support autocomplete="off" for login fields.

• If a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.
• If a site sets autocomplete="off" for username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.

This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).

出于这个原因，许多现代浏览器不支持 autocomplete="off" 登录字段。

• 如果站点为表单设置了 autocomplete="off"，并且表单包含用户名和密码输入字段，那么浏览器仍会提供记住此登录名，如果用户同意，浏览器将在下次访问时自动填充这些字段用户访问此页面。
• 如果站点为用户名和密码输入字段设置了 autocomplete="off"，那么浏览器仍会提供记住此登录信息，如果用户同意，浏览器将在用户下次访问此页面时自动填充这些字段。

这是 Firefox（自版本 38）、Google Chrome（自 34）和 Internet Explorer（自版本 11）中的行为。

Finally a little info on whether the attribute belongs on the formelement or the inputelement. The spec again has the answer:

最后是关于属性是属于form元素还是input元素的一些信息。规范再次给出了答案：

If the autocomplete attribute is omitted, the default value corresponding to the state of the element's form owner's autocomplete attribute is used instead (either "on" or "off"). If there is no form owner, then the value "on" is used.

如果省略自动完成属性，则使用与元素的表单所有者的自动完成属性的状态相对应的默认值（“开”或“关”）。如果没有表单所有者，则使用值“on”。

So. Putting it on the form should apply to all input fields. Putting it on an individual element should apply to just that element (even if there isn't one on the form). If autocompleteisn't set at all, it defaults to on.

所以。将它放在表单上应该适用于所有输入字段。将它放在单个元素上应该只适用于该元素（即使表单上没有）。如果autocomplete根本没有设置，则默认为on。

Summary

概括

To disable autocompleteon the whole form:

要禁用autocomplete整个表单：

<form autocomplete="off" ...>

Or if you dynamically need to do it:

或者，如果您动态需要这样做：

<form autocomplete="random-string" ...>

To disable autocompleteon an individual element (regardless of the form setting being present or not)

禁用autocomplete单个元素（无论表单设置是否存在）

<input autocomplete="off" ...>

Or if you dynamically need to do it:

或者，如果您动态需要这样做：

<input autocomplete="random-string" ...>

And remember that certain user agents can override even your hardest fought attempts to disable autocomplete.

请记住，某些用户代理甚至可以覆盖您最艰难的禁用autocomplete.

回答by Nathan Pitman

The solution at present is to use type="search". Google doesn't apply autofill to inputs with a type of search.

目前的解决方案是使用type="search". Google 不会将自动填充应用于具有搜索类型的输入。

See: https://twitter.com/Paul_Kinlan/status/596613148985171968

见：https: //twitter.com/Paul_Kinlan/status/596613148985171968

Update 04/04/2016:Looks like this is fixed! See http://codereview.chromium.org/1473733008

2016 年 4 月 4 日更新：看起来已经修复了！见http://codereview.chromium.org/1473733008

回答by Peter Kerr

Chrome version 34 now ignores the autocomplete=off, see this.

Chrome 版本 34 现在忽略了autocomplete=off， 请参阅此.

Lots of discussionon whether this is a good thing or a bad thing? Whats your views?

很多关于这是好事还是坏事的讨论？你有什么看法？

回答by dsuess

Browser does not care about autocomplete=off auto or even fills credentials to wrong text field?

浏览器不关心 autocomplete=off auto 甚至将凭据填充到错误的文本字段？

I fixed it by setting the password field to read-only and activate it, when user clicks into it or uses tab-key to this field.

我通过将密码字段设置为只读并激活它来修复它，当用户单击它或使用该字段的 Tab 键时。

fix browser autofill in: readonly and set writeble on focus(at mouse click and tabbing through fields)

修复浏览器自动填充：只读并在焦点上设置可写（通过鼠标单击和选项卡浏览字段）

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

Update: Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

更新：Mobile Safari 在字段中设置光标，但不显示虚拟键盘。New Fix 像以前一样工作，但处理虚拟键盘：

<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

// 更新结束

By the way, more informationon my observation:

顺便说一下，关于我的观察的更多信息：

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, sometimes even autocomplete=off would not prevent to fill in credentialsinto wrong fields, but not user or nickname field.

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

回答by Keith

TL;DR:Tell Chrome that this is a new password input and it won't provide old ones as autocomplete suggestions:

TL;DR：告诉 Chrome 这是一个新密码输入，它不会提供旧密码作为自动完成建议：

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

---

---

autocomplete="off"doesn't work due to a design decision - lots of research shows that users have much longer and harder to hack passwords if they can store them in a browser or password manager.

autocomplete="off"由于设计决定而不起作用 - 大量研究表明，如果用户可以将密码存储在浏览器或密码管理器中，则他们可以更长更难破解密码。

The specification for autocompletehas changed, and now supports various values to make login forms easy to auto complete:

的规范autocomplete已更改，现在支持各种值以使登录表单易于自动完成：

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

If you don'tprovide these Chrome still tries to guess, and when it does it ignores autocomplete="off".

如果你不提供这些 Chrome 仍然会尝试猜测，当它这样做时它会忽略autocomplete="off".

The solution is that autocompletevalues also exist for password reset forms:

解决方案是autocomplete密码重置表单也存在值：

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

You can use this autocomplete="new-password"flag to tell Chrome not to guess the password, even if it has one stored for this site.

您可以使用此autocomplete="new-password"标志告诉 Chrome 不要猜测密码，即使它为该站点存储了密码。

Chrome can also manage passwords for sites directly using the credentials API, which is a standard and will probably have universal support eventually.

Chrome 还可以使用凭据 API直接管理站点的密码，这是一个标准，最终可能会得到普遍支持。