Chrome 忽略 autocomplete="off"

Question

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

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

Answer 1

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

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

---

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

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

说明：

autocomplete 仍然可以在 <input>autocomplete="off" 上工作，但您可以将 off 更改为随机字符串，例如 nope。

---

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

1.

HTML：

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

JS（加载）：

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

或使用 jQuery:

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

---

2.

HTML：

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

JS（加载）：

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

或使用 jQuery:

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

---

使用 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>

---

适用于：

• 铬：49+

• 火狐：44+

Answer 2

更新

现在 Chrome 似乎忽略了 style="display: none;" 或 style="visibility: hidden; 属性。

您可以将其更改为：

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

根据我的经验，Chrome 只会自动完成第一个 <input type="password"> 和前一个 <input>。所以我添加了：

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

到<form>的顶部，这个案子就解决了。

Answer 3

Chrome 现在似乎会忽略 autocomplete="off"，除非它位于 <form autocomplete="off"> 标签上。

Answer 4

2021 年更新：
将 更改为

就是这样。保留以下答案以怀旧。

---

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

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

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

这不适用于密码字段 - 在 Chrome 中这些字段的处理方式非常不同。详情请见https://code.google.com/p/chromium/issues/detail?id=468153。

更新：Chromium 团队于 2016 年 3 月 11 日以“不会修复”的形式关闭了错误。有关完整说明，请参阅 my originally filed bug report 中的最后一条评论。 TL;DR：使用语义自动完成属性，例如 autocomplete="new-street-address" 来避免 Chrome 执行自动填充。

Answer 5

现代方法

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

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

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

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

WORKING EXAMPLE

Answer 6

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

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

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

因此，在 Chrome 的情况下，开发人员基本上说过“我们将让用户自行决定他们是否希望 autocomplete 工作。如果你不想要它，不要在您的浏览器中启用它”。

然而，他们似乎有点过分热心于我的喜好，但事实就是如此。该规范还讨论了此类举措的潜在安全隐患：

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

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

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

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

在某些情况下，即使自动完成属性设置为关闭，浏览器也会继续提示自动完成值。这种意想不到的行为可能会让开发人员感到非常困惑。真正强制不完成的技巧是为属性分配一个随机字符串

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

autocomplete="nope"

以下各项也应如此：

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

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

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

因此，许多现代浏览器不支持登录字段的 autocomplete="off"。

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

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

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

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

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

总结

在整个表单上禁用autocomplete：

<form autocomplete="off" ...>

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

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

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

<input autocomplete="off" ...>

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

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

请记住，某些用户代理甚至可以覆盖您最努力地禁用 autocomplete 的尝试。

Answer 7

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

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

---

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

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

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

如果您不提供这些，Chrome 仍然会尝试猜测，并且当它提供时，它会忽略 autocomplete="off"。

解决方案是密码重置表单也存在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>

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

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

Answer 8

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

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

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

Answer 9

我已经通过使用随机字符解决了与谷歌浏览器的无休止的斗争。当你总是用随机字符串渲染自动完成时，它永远不会记住任何东西。

<input name="name" type="text" autocomplete="rutjfkde">

希望对其他人有所帮助。

Answer 10

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

我通过将密码字段设置为只读并在用户单击该字段或对该字段使用制表键时激活它来修复它。

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

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

更新： 移动 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/

// 更新结束

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

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

Answer 11

Chrome 版本 34 现在会忽略 autocomplete=off， see this.

Lots of discussion关于这是好事还是坏事？你有什么看法？

Answer 12

您可以使用autocomplete="new-password"

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

工作于：

• 铬：53、54、55
• 火狐：48、49、50

Answer 13

[2021 年适用于 Chrome（v88、89、90）、Firefox、Brave、Safari]

这里已经写的旧答案可以反复试验，但大多数 他们没有链接到任何官方文档或 Chrome 对此有何评论 问题。

问题中提到的问题是因为 Chrome 的自动填充功能，这是 Chrome 在此错误链接中的立场 - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

简单来说，有两种情况-

• [CASE 1]：您的input 类型不是password。在这种情况下，解决方案很简单，分为三个步骤。

  • 将name 属性添加到input
  • name 不应以电子邮件或用户名之类的值开头，否则 Chrome 最终仍会显示下拉菜单。例如，name="emailToDelete" 显示下拉菜单，但 name="to-delete-email" 不显示。同样适用于autocomplete 属性。
  • 添加autocomplete属性，并添加一个对你有意义的值，比如new-field-name

  它看起来像这样，在你的余生中你不会再看到这个输入的自动填充 -

  <input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
  

• [案例 2]：input type 是 password

  • 好吧，在这种情况下，无论您进行何种试验，Chrome 都会向您显示管理密码/使用现有密码的下拉菜单。 Firefox 也会做类似的事情，所有其他主要浏览器也是如此。 [1]
  • 在这种情况下，如果您真的想阻止用户查看下拉菜单以管理密码/查看安全生成的密码，您将不得不使用 JS 来切换输入类型，如本文档的其他答案中所述问题。

[1] 关于关闭自动完成功能的详细 MDN 文档 - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Answer 14

Autocomplete="Off" 不再起作用了。

尝试只使用随机字符串而不是"Off"，例如Autocomplete="NoAutocomplete"

希望对你有帮助。

Answer 15

看到 chrome 忽略了autocomplete="off"，我用一种愚蠢的方法解决了这个问题，即使用“假输入”欺骗 chrome 来填充它而不是填充“真实”输入。

示例：

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome会填写“假输入”，提交时，服务器会取“真实输入”的值。

Answer 16

我发布这个答案是为了给这个问题带来更新的解决方案。 我目前正在使用 Chrome 49，对此没有给出答案。 我也在寻找一种适用于其他浏览器和以前版本的解决方案。

将此代码放在表单的开头

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

然后，对于您的真实密码字段，使用

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

如果这不再有效，或者如果您遇到其他浏览器或版本的问题，请评论此答案。

批准日期：

• 铬：49
• 火狐：44、45
• 边缘：25
• Internet Explorer：11

Answer 17

不知道为什么这在我的情况下有效，但在 chrome 上我使用了 autocomplete="none" 并且 Chrome 停止为我的文本字段建议地址。

Answer 18

写一个 2020+ 的答案，以防万一这对任何人都有帮助。我在上面尝试了许多组合，尽管在我的情况下遗漏了一个键。尽管我保留了 autocomplete="nope" 一个随机字符串，但它对我不起作用，因为我有 name 属性 missing！

所以我保留了 name='password' 和自动完成=“新密码”

对于用户名，我保留了 name="usrid" // 不要保留包含 'user' 的字符串

and autocomplete = "new-password" // 也一样，所以 google 停止提示密码（管理密码下拉菜单）

这对我来说效果很好。 （我为 Cordova/ionic 使用的 Android 和 iOS 网络视图做了这个）

<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
        autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>

Answer 19

autocomplete="off" 通常工作，但并非总是如此。这取决于输入字段的name。 “地址”、“电子邮件”、“姓名”等名称 - 将自动完成（浏览器认为它们对用户有帮助），当“代码”、“pin”等字段 - 不会自动完成时（如果设置了autocomplete="off"）

我的问题是 - 自动完成功能与谷歌 address helper 混淆了

我通过重命名修复了它

来自

<input type="text" name="address" autocomplete="off">

到

<input type="text" name="the_address" autocomplete="off">

在 chrome 71 中测试。

Answer 20

2020 年更新结束。我尝试了来自不同站点的所有旧解决方案。他们都没有工作！ :-(
然后我发现了这个：
使用

<input type="search"/> 

自动完成功能消失了！

使用 Chrome 86、FireFox、Edge 87 取得成功。

Answer 21

对于任何正在寻找解决方案的人，我终于弄明白了。

如果页面是 HTML5 页面（我使用的是 XHTML），Chrome 只会遵循 autocomplete="off"。

我将我的页面转换为 HTML5 并且问题消失了（facepalm）。

Answer 22

autocomplete=off 在现代浏览器中很大程度上被忽略 - 主要是由于密码管理器等原因。

您可以尝试添加这个autocomplete="new-password" 它并非所有浏览器都完全支持，但它适用于某些浏览器

Answer 23

将输入类型属性更改为type="search"。

Google 不会对具有某种搜索类型的输入应用自动填充功能。

Answer 24

直到上周，以下两种解决方案似乎都适用于 Chrome、IE 和 Firefox。但是随着 Chrome 版本 48（仍然是 49）的发布，它们不再起作用：

1. 表单顶部的以下内容：

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

1. 密码输入元素中的以下内容：

   自动完成=“关闭”

所以为了快速解决这个问题，起初我尝试使用一个主要的技巧，即最初将密码输入元素设置为禁用，然后在文档准备功能中使用 setTimeout 再次启用它。

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

但这似乎太疯狂了，我进行了更多搜索，并在Disabling Chrome Autofill 中找到了@tibalts 的答案。他的回答是在密码输入中使用 autocomplete="new-password" ，这似乎适用于所有浏览器（我在此阶段保留了上面的修复号 1）。

这是 Google Chrome 开发者讨论中的链接： https://code.google.com/p/chromium/issues/detail?id=370363#c7

Answer 25

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

来自：https://stackoverflow.com/a/29582380/75799

Answer 26

在 Chrome 48+ 中使用此解决方案：

1. 将假字段放在真实字段之前：

   <form autocomplete="off">
     <input name="fake_email"    class="visually-hidden" type="text">
     <input name="fake_password" class="visually-hidden" type="password">
   
     <input autocomplete="off" name="email"    type="text">
     <input autocomplete="off" name="password" type="password">
   </form>
   

2. 隐藏虚假字段：

   .visually-hidden {
     margin: -1px;
     padding: 0;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     clip: rect(0, 0, 0, 0);
     position: absolute;
   }
   

3. 你做到了！

这也适用于旧版本。

Answer 27

在 chrome v. 34 之后，将 autocomplete="off" 设置为 <form> 标记不起作用

我进行了更改以避免这种烦人的行为：

1. 去掉密码输入的name和id
2. 在输入中加入一个类（例如：passwordInput）

（到目前为止，Chrome 不会将保存的密码放在输入中，但现在表单已损坏）

最后，为了让表单工作，当用户点击提交按钮，或者当你想触发表单提交时，运行这段代码：

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

在我的例子中，我曾经在密码输入中有id="password" name="password"，所以我在触发提交之前把它们放回去了。

Answer 28

从 Chrome 42 开始，此线程（截至2015-05-21T12:50:23+00:00）中的任何解决方案/黑客都不能用于禁用单个字段或整个表单的自动完成功能。

编辑：我发现您实际上只需要在表单中插入一个虚拟电子邮件字段（您可以使用 display: none 将其隐藏），然后再插入其他字段以防止自动完成。我认为 chrome 会在每个自动完成字段中存储某种形式的签名，并且包含另一个电子邮件字段会破坏此签名并阻止自动完成。

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

好消息是，由于“表单签名”被破坏了，没有一个字段是自动完成的，所以在提交之前不需要 JS 清除虚假字段。

旧答案：

我发现唯一可行的方法是在真实字段之前插入两个电子邮件和密码类型的虚拟字段。您可以将它们设置为 display: none 以隐藏它们（忽略这些字段不够聪明）：

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

很遗憾，这些字段必须在您的表单中（否则两组输入都会自动填充）。因此，要真正忽略虚假字段，您需要在表单提交上运行一些 JS 以清除它们：

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

---

请注意，使用 Javascript 清除值可以覆盖自动完成功能。因此，如果在禁用 JS 的情况下失去正确的行为是可以接受的，您可以使用 Chrome 的 JS 自动完成“polyfill”来简化所有这些：

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

Answer 29

我有一个类似的问题，输入字段要么是姓名，要么是电子邮件。我设置了 autocomplete="off" 但 Chrome 仍然强制建议。原来是因为占位符文本中有“姓名”和“电子邮件”这两个词。

例如

<input type="text" placeholder="name or email" autocomplete="off" />

我通过在占位符中的单词中放置一个零宽度空格来解决它。不再有 Chrome 自动完成功能。

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

Answer 30

我设法利用此规则禁用了自动完成功能：

不是密码但应该隐藏的字段，例如信用 卡号，也可能有 type="password" 属性，但应该 包含相关的自动完成属性，例如“cc-number”或 “cc-csc”。 https://www.chromium.org/developers/design-documents/create-amazing-password-forms

<input id="haxed" type="password" autocomplete="cc-number">

然而它伴随着巨大的责任:)

不要试图欺骗浏览器密码管理器（无论是内置在 浏览器或外部）旨在简化用户体验。 插入虚假字段，使用不正确的自动完成属性或 利用现有密码管理器的弱点 只会让用户感到沮丧。