Chrome 忽略 autocomplete="off"

更新

现在 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> 的顶部，此案已解决。

---

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

---

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 执行自动填充。

---

现代方法

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

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

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

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

WORKING EXAMPLE

---

好吧，聚会有点晚了，但似乎对 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 的尝试。

---

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

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

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

autocomplete has 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 管理网站的密码，这是一个标准，最终可能会得到普遍支持。

---

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

请参阅：https://twitter.com/Paul_Kinlan/status/596613148985171968

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

---

始终有效的解决方案

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

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

希望它对其他人有所帮助。

2022 年更新：

Chrome 进行了这项改进：autocomplete="new-password" 这将解决它，但我不确定 Chrome 是否会在一段时间后再次将其更改为不同的功能。

---

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

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

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

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

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

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

// 更新结束

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

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

---

Chrome 版本 34 现在忽略 autocomplete=off、see this。

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

---

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

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

工作于：

铬：53、54、55

火狐：48、49、50

---

[适用于 Chrome（v88、89、90）、Firefox、Brave、Safari 的 2021 年工作] 此处已编写的旧答案将经过反复试验，但其中大多数未链接到任何官方文档或 Chrome 必须在这件事上说。

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

简单来说，有两种情况——

[案例 1]：您的输入类型不是密码。在这种情况下，解决方案很简单，分为三个步骤。向输入名称添加名称属性不应以电子邮件或用户名之类的值开头，否则 Chrome 仍会显示下拉列表。例如，name="emailToDelete" 显示下拉列表，但 name="to-delete-email" 不显示。同样适用于自动完成属性。添加 autocomplete 属性，并添加一个对您有意义的值，例如 new-field-name 它将看起来像这样，并且您将在余生中不会再次看到此输入的自动填充 -

将名称属性添加到输入

名称不应以电子邮件或用户名之类的值开头，否则 Chrome 仍会显示下拉列表。例如，name="emailToDelete" 显示下拉列表，但 name="to-delete-email" 不显示。同样适用于自动完成属性。

添加自动完成属性，并添加对您有意义的值，例如 new-field-name

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

好吧，在这种情况下，无论您进行何种试验，Chrome 都会向您显示管理密码/使用现有密码的下拉菜单。 Firefox 也会做类似的事情，所有其他主要浏览器也是如此。 [1]

在这种情况下，如果您真的想阻止用户查看下拉菜单以管理密码/查看安全生成的密码，您将不得不使用 JS 来切换输入类型，如本问题的其他答案中所述。

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

---

Autocomplete="Off" 不再起作用。

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

我希望它有所帮助。

---

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

例子：

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

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

---

我发布这个答案是为了给这个问题带来更新的解决方案。我目前正在使用 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

互联网浏览器：11

---

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

---

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

所以我保留了 name='password' 和 autocomplete = "new-password"

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

和 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>

---

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

我的问题是 - 自动完成与 google address helper 混淆了

我通过重命名来修复它

从

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

至

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

在 chrome 71 中测试。

---

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

<input type="search"/> 

自动完成功能消失了！

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

---

对于任何寻找解决方案的人，我终于弄清楚了。

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

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

---

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

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

---

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

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

---

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

表格顶部的以下内容：

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

密码输入元素中的以下内容： autocomplete="off"

所以为了快速解决这个问题，起初我尝试使用最初将密码输入元素设置为禁用的主要技巧，然后在文档准备功能中使用 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

---

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

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

---

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

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

隐藏虚假字段：.视觉隐藏{边距：-1px；填充：0；宽度：1px；高度：1px；溢出：隐藏；剪辑：矩形（0 0 0 0）；剪辑：矩形（0、0、0、0）；位置：绝对； } 你做到了！

这也适用于旧版本。

---

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

不是密码但应该被隐藏的字段，例如信用卡号，也可能具有 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">

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

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

---

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

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

删除密码输入的名称和 id 在输入中放入一个类（例如：passwordInput）

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

最后，要使表单工作，请在用户单击提交按钮时运行此代码，或者在您想触发表单提交时运行：

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

就我而言，我曾经在密码输入中有 id="password" name="password"，所以我在触发提交之前将它们放回去。

---

虽然我同意自动完成功能应该是用户的选择，但有时 Chrome 会过分热衷于它（其他浏览器也可能如此）。例如，具有不同名称的密码字段仍会自动填充保存的密码，而前一个字段则填充用户名。当表单是 Web 应用程序的用户管理表单并且您不希望自动填充使用您自己的凭据填充它时，这尤其糟糕。

Chrome 现在完全忽略了 autocomplete="off"。虽然 JS hack 可能很有效，但我发现了一种在撰写本文时有效的简单方法：

将密码字段的值设置为控制字符 8（PHP 中的 "\x08" 或 HTML 中的 ）。这会阻止 Chrome 自动填充该字段，因为它有一个值，但没有输入实际值，因为这是退格字符。

是的，这仍然是一个 hack，但它对我有用。 YMMV。

---

从 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);

---