禁用 Chrome 自动填充

Question

这个问题的答案是社区的努力。 编辑现有答案以改进这篇文章。 它目前不接受新的答案或互动。

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

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

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

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

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

Answer 1

2021 年 1 月： autocomplete="off"现在按预期工作（在 Chrome 88 macOS 上测试）。

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

---

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 中的自动填充信息可能是他们采取的必要措施。

Answer 2

我刚刚发现，如果您记住了某个网站的用户名和密码，当前版本的 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; position: fixed;top:-100px;left:-100px; width:5px; 做 ：）

2020 年 4 月更新

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

Answer 3

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

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

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

---

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

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

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

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

Answer 4

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

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

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

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

更新：

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

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

Answer 5

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

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

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

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

Answer 6

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

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

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

Answer 7

试试这个。 我知道这个问题有些陈旧，但这是解决问题的不同方法。

我还注意到问题就在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="" />

希望它会帮助某人。

Answer 8

对我来说，简单

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

做到了。

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

Answer 9

您必须添加此属性：

autocomplete="new-password"

来源链接： 全文

Answer 10

它是如此简单和棘手:)

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

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

Answer 11

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

选项 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 注释，以免其他开发人员将其删除！ 还要确保隐藏输入的名称是相关的。

Answer 12

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

Answer 13

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

autocomplete="nope"

Answer 14

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

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

Role="presentation" & autocomplete="off"

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

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

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

Answer 15

我发现将此添加到表单会阻止 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 决定它比开发人员更了解何时自动完成。 有一种真正的微软感觉。

Answer 16

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

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

Answer 17

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

<input type="text">

其次是：

<input type="password">

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

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

Answer 18

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

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

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

Answer 19

2016 年，谷歌浏览器开始忽略autocomplete=off尽管它在 W3C 中。 他们发布的答案：

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

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

当需要 autocomplete=off 时，他们打开了另一个错误来发布有效的用例

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

如果屏幕上有任何密码字段，甚至是隐藏的密码字段，自动填充就会介入。 如果不破坏您自己的页面逻辑，您可以将每个密码字段放入其自己的表单中，以打破此逻辑。

<input type=name >

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

Answer 20

如果您在保留占位符但禁用 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/

Answer 21

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

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

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

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

Answer 22

好吧，因为我们都有这个问题，所以我花了一些时间来为这个问题编写一个有效的 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 测试

Answer 23

尝试以下对我jQuery代码。

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

Answer 24

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

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

Answer 25

这是一个肮脏的黑客 -

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

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

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

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

Answer 26

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

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

Answer 27

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

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

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

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

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

Answer 28

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

Answer 29

根据Chromium 错误报告 #352347 Chrome 不再尊重autocomplete="off|false|anythingelse" ，无论是表单还是输入。

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

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

Answer 30

对我有用的唯一方法是：（需要jQuery）

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Answer 31

我遇到了同样的问题。 这是在 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">