禁用 Chrome 自动填充

2022 年 4 月：autocomplete="off" 仍然无法在 Chrome 中运行，而且在查看与该问题相关的 Chromium 错误（可能仅适用于密码字段）后，我认为它从未出现过。我看到在 2014 中报告的问题已以“WontFix”的形式关闭，而问题仍处于开放状态并正在讨论中 [1][2]。根据我收集的信息，Chromium 团队认为 autocomplete="off" 没有有效的用例。

总的来说，我仍然认为这两种极端策略（“总是尊重 autocomplete=off”和“从不尊重 autocomplete=off”）都不好。

https://bugs.chromium.org/p/chromium/issues/detail?id=914451#c66

他们的印象是网站不会正确使用它并决定不应用它，建议以下建议：

如果您想禁用自动填充，我们的建议是利用 autocomplete 属性为您的字段赋予语义含义。如果我们遇到无法识别的自动完成属性，我们不会尝试填充它。例如，如果您的 CRM 工具中有一个地址输入字段，您不希望 Chrome 自动填充，您可以为其赋予相对于您所要求的内容有意义的语义含义：例如 autocomplete="new-user -街道地址”。如果 Chrome 遇到这种情况，它不会尝试自动填充该字段。

https://bugs.chromium.org/p/chromium/issues/detail?id=587466#c10

虽然这个“建议”目前对我有用，但它可能并不总是正确的，看起来团队正在进行实验，这意味着自动完成功能可能会在新版本中发生变化。

我们不得不求助于这个很愚蠢，但唯一可靠的方法是尽可能地尝试混淆浏览器：

命名您的输入而不会将任何信息泄露给浏览器，即 id="field1" 而不是 id="country"。

设置 autocomplete="do-not-autofill"，基本上使用不会让浏览器将其识别为可自动填充字段的任何值。

2021 年 1 月：autocomplete="off" 现在可以正常工作（在 Chrome 88 macOS 上测试）。

为此，请确保您的输入标签包含在表单标签中

2020 年 9 月：autocomplete="chrome-off" 禁用 Chrome 自动填充功能。

原始答案，2015：

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

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

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

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

---

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

旧解决方案

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

更新的解决方案

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

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

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

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

2016 年 3 月更新

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

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

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

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

2018 年 7 月更新

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

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

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

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

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

2020 年 3 月更新

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

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

我注意到，如果 <form> 中的元素少于三个，autocomplete="off" 可以在 Chrome 80 上运行。我不知道逻辑是什么，也不知道相关文档在哪里。

@dubrox 的这个也可能是相关的，虽然我没有测试过：

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

2020 年 4 月更新

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

---

经过几个月和几个月的努力，我发现解决方案比你想象的要简单得多：

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

就这么简单，它在谷歌浏览器中也像一个魅力！

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

注意：网上很多信息说浏览器现在将 autocomplete='false' 视为与 autocomplete='off' 相同。至少在这一分钟，它正在阻止这三个浏览器的自动完成。

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

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

---

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

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

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

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

更新：

移动 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 中的密码字段之前（只是由于观察而猜测）。由于浏览器是最后一个实例，您无法控制它，

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

---

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

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

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

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

---

我不知道为什么，但这对我很有帮助。

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

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

---

尝试这个。我知道这个问题有些陈旧，但这是解决问题的另一种方法。

我还注意到问题出现在 password 字段上方。

我尝试了这两种方法

<form autocomplete="off"> 和 <input autocomplete="off"> 但它们都不适合我。

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

像这样的东西：

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

希望它会帮助某人。

---

对我来说，简单

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

做到了。

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

---

您必须添加此属性：

autocomplete="new-password"

源链接：Full Article

---

它是如此简单和棘手:)

谷歌浏览器基本上会在 <form>、<body> 和 <iframe> 标记内搜索 每个可见的密码元素 以启用自动重新填充，因此要禁用此功能，您需要添加一个虚拟密码元素如下：

如果您的密码元素在 标签内，则需要将虚拟元素作为表单中的第一个元素，紧跟在 打开标签之后 如果您的密码元素不在 标签内，则将虚拟元素作为第一个元素在 打开标记之后立即在您的 html 页面中您需要隐藏虚拟元素而不使用 css display:none 所以基本上使用以下作为虚拟密码元素。

---

这是我提出的解决方案，因为谷歌坚持要覆盖人们似乎做出的每一个变通办法。

选项 1 - 单击时选择所有文本

将输入的值设置为用户的示例（例如 your@email.com）或字段的标签（例如 Email），并将名为 focus-select 的类添加到您的输入：

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

这是jQuery：

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

我真的看不到 Chrome 会弄乱价值观。那太疯狂了。所以希望这是一个安全的解决方案。

选项 2 - 将电子邮件值设置为空格，然后将其删除

假设您有两个输入，例如电子邮件和密码，请将电子邮件字段的值设置为 " "（一个空格）并添加属性/值 autocomplete="off"，然后使用 JavaScript 清除它。 您可以将密码值留空。

如果用户由于某种原因没有 JavaScript，请确保您在服务器端修剪他们的输入（您可能无论如何都应该这样做），以防他们不删除空间。

这是jQuery：

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

我将超时设置为 15，因为 5 在我的测试中似乎偶尔会起作用，所以将这个数字增加三倍似乎是一个安全的选择。

未能将初始值设置为空格会导致 Chrome 将输入保留为黄色，就好像它已自动填充一样。

选项 3 - 隐藏输入

把它放在表格的开头：

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS：

.hide{ display:none; }

确保保留 HTML 注释，以免其他开发人员将其删除！还要确保隐藏输入的名称是相关的。

---

使用 css text-security: disc 而不使用 type=password。

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

css

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}

---

以前输入的由 chrome 缓存的值显示为下拉选择列表。这可以通过 autocomplete=off 禁用，在 chrome 的高级设置中明确保存的地址会在地址字段获得焦点时提供自动填充弹出窗口。这可以通过 autocomplete="false" 禁用.但是它将允许chrome在下拉列表中显示缓存的值。

在输入 html 字段上，以下将关闭两者。

Role="presentation" & autocomplete="off"

在为地址自动填充选择输入字段时，Chrome 会忽略那些没有前面标签 html 元素的输入字段。

为了确保 chrome 解析器忽略自动填充地址弹出的输入字段，可以在标签和文本框之间添加隐藏按钮或图像控件。这将破坏自动填充的标签输入对创建的 chrome 解析序列。解析地址字段时忽略复选框

Chrome 还考虑标签元素上的“for”属性。它可以用来打破 chrome 的解析序列。

---

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

autocomplete="nope"

---

我发现将此添加到表单会阻止 Chrome 使用自动填充。

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

在这里找到。 https://code.google.com/p/chromium/issues/detail?id=468153#hc41

真正令人失望的是，Chrome 决定它比开发人员更了解何时自动完成。有一种真正的微软感觉。

---

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

将 readonly 属性添加到标签以及 onfocus 事件删除它修复了问题

---

对于用户名密码组合，这是一个容易解决的问题。 Chrome 启发式查找模式：

<input type="text">

其次是：

<input type="password">

简单地通过使这个无效来打破这个过程：

<input type="text">
<input type="text" onfocus="this.type='password'">

---

2016 年，Google Chrome 开始忽略 autocomplete=off，尽管它在 W3C 中。 The answer they posted：

这里棘手的部分是，在网络之旅的某个地方 autocomplete=off 成为许多表单字段的默认设置，而没有真正考虑过这是否对用户有利。这并不意味着不存在您不希望浏览器自动填充数据的非常有效的情况（例如在 CRM 系统上），但总的来说，我们将这些情况视为少数情况。因此，我们开始忽略 Chrome 自动填充数据的 autocomplete=off。

这实质上是说：我们更了解用户想要什么。

They opened another bug to post valid use cases when autocomplete=off is required

在我的所有 B2B 应用程序中，我没有看到与自动完成有关的问题，但只有输入密码类型。

如果屏幕上有任何密码字段，即使是隐藏的，自动填充也会介入。要打破这个逻辑，如果它不破坏你自己的页面逻辑，你可以将每个密码字段放入它自己的表单中。

<input type=name >

<form>
    <input type=password >
</form>

---

Mike Nelsons 提供的解决方案在 Chrome 50.0.2661.102 m 中对我不起作用。只需添加具有 display:none 设置的相同类型的输入元素不再禁用本机浏览器自动完成。现在需要复制您希望禁用自动完成的输入字段的名称属性。

此外，为避免输入字段在表单元素中时重复，您应该在未显示的元素上放置禁用。这将阻止该元素作为表单操作的一部分提交。

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

---

这有两个部分。 Chrome 和其他浏览器会记住以前输入的字段名称值，并基于此向用户提供一个自动完成列表（值得注意的是，密码类型输入从不以这种方式记住，原因相当明显）。您可以添加 autocomplete="off" 以防止在您的电子邮件字段等内容上发生这种情况。

但是，您将拥有密码填充器。大多数浏览器都有自己的内置实现，并且还有许多提供此功能的第三方实用程序。这，你停不下来。这是用户自己选择保存此信息以供以后自动填写，完全超出您的应用程序的范围和影响范围。

---

如果您在保留占位符但禁用 chrome 自动填充时遇到问题，我发现了这个解决方法。

问题

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

上面的示例仍然会产生自动填充问题，但如果您使用 required="required" 和一些 CSS，您可以复制占位符并且 Chrome 不会拾取标签。

解决方案

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

---

我真的不喜欢制作隐藏字段，我认为这样做会很快变得非常混乱。

在您要停止自动完成的输入字段上，这将起作用。使字段只读并在焦点上删除该属性，如下所示

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

这样做是您首先必须通过选择该字段来删除只读属性，那时您很可能将填充您自己的用户输入并弯腰自动填充以接管

---

根据 Chromium bug report #352347，Chrome 不再尊重 autocomplete="off|false|anythingelse"，无论是在表单上还是在输入上。

对我有用的唯一解决方案是添加一个虚拟密码字段：

<input type="password" class="hidden" />
<input type="password" />

---

好吧，既然我们都有这个问题，我花了一些时间来为这个问题编写一个有效的 jQuery 扩展。谷歌必须遵循 html 标记，而不是我们遵循谷歌

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

只需将其添加到 /js/jquery.extends.js 之类的文件中，然后将其包含在 jQuery 中。在加载文档时将其应用于每个表单元素，如下所示：

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle with tests

---

请尝试以下对我有用的 jQuery 代码。

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

---

这是一个肮脏的黑客 -

你在这里有你的元素（添加 disabled 属性）：

<input type="text" name="test" id="test" disabled="disabled" />

然后在你的网页底部放一些 JavaScript：

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

---

不同的解决方案，基于 webkit。如前所述，只要 Chrome 找到密码字段，它就会自动完成电子邮件。 AFAIK，这与 autocomplete = [whatever] 无关。

为了规避这种情况，请将输入类型更改为文本并以您想要的任何形式应用 webkit 安全字体。

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

据我所知，这至少与输入类型 = 密码一样安全，它是复制和粘贴安全的。但是，通过删除将删除星号的样式很容易受到攻击，当然 input type = password 可以很容易地在控制台中更改为 input type = text 以显示任何自动填充的密码，因此实际上几乎相同。

---

通过将 autocomplete 设置为 off 应该可以在这里工作，我有一个谷歌在搜索页面中使用的示例。我从检查元素中找到了这个。

https://i.stack.imgur.com/NLvNh.png

编辑：如果 off 不起作用，请尝试 false 或 nofill。就我而言，它正在使用 chrome 版本 48.0

---

我终于找到了使用 textarea 的成功。对于密码字段，有一个事件处理程序将输入的每个字符替换为“•”。

---

我遇到了同样的问题。这是在 Chrome 上禁用自动填充用户名和密码的解决方案（仅在 Chrome 上测试过）

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">

---