在 Chrome 63 中禁用自动填充 [重复]

Posted 2023-02-22

【中文标题】在 Chrome 63 中禁用自动填充 [重复]

【英文标题】：Disable autofill in Chrome 63 [duplicate]

【发布时间】：2018-05-26 06:45:17

【问题描述】：

我刚刚将浏览器更新到 Chrome 版本 63.0.3239.84（官方版本）（64 位）。

然后我继续访问我的网站，在那里我有一个带有autocomplete='off' 的输入框，但我仍然得到以下信息：

（您可以在其下方看到我的内置建议下拉菜单）

以前从来没有这种情况。其他一切都没有改变！

为什么会这样？这是新版chrome的bug吗？我已经尝试了所有其他建议，例如 autocomplete="false" 或将 autocomplete=off 应用于表单。我什至尝试在页面加载后使用 jquery 应用这些，但也没有运气。

我已经在多台机器上使用最新版本的 chrome 在不同的操作系统上进行了测试。问题依然存在。

【问题讨论】：

你能提供一个关于问题的小提琴或网址吗？

我可以确认这也从 63 版本开始发生。

你能分享一个链接来看看这个问题吗？我昨天试过了，它与autocomplete="off"

是的，我认为 Chrome 63 的东西。我看到了同样的问题，这里也提到了：developers.google.com/web/updates/2017/10/…

@Erebus 您是在谈论 cmets 还是在实际弃用中？

【参考方案1】：

2019 似乎autocomplete="disabled" 从 Chrome 72 开始又可以使用了。

---

因为很多人在没有阅读评论的情况下就投了反对票： 自 2018 年起，这不再适用于 Chrome / Chrome 63+ 相关：https://bugs.chromium.org/p/chromium/issues/detail?id=587466

使用 autocomplete="false" 而不是 autocomplete="off" 可以正常工作，您可以从 Chrome 团队了解他们这样做的原因

---

这里：

https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands https://bugs.chromium.org/p/chromium/issues/detail?id=468153 https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zhhj7hCip5c https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

【讨论】：

这些链接中没有关于 autocomplete="false" 的信息。而且它也不起作用。我已经在输入和表单上尝试过。

不知道最近的反对票是为了什么，这篇文章是从它工作的时候开始的，现在它没有，不是我的错 Google 不能接受来自数千名开发者的反馈。

@tresf 看来他们实际上也为 64 岁之后的几个版本做到了：bugs.chromium.org/p/chromium/issues/detail?id=587466#c232

autocomplete="disabled" 对我不起作用版本 72.0.3626.119（官方构建）（64 位）windows 10

在我的情况下似乎不起作用，Chrome 版本 73.0.3683.75（官方构建）（64 位），macOS 10.14.3。坦率地说，在整个问题中，没有提供的答案似乎有效。我还在 72 中测试了此修复程序，以及此问题中的许多其他解决方法，但似乎在这两个版本中都没有。但是，将readonly="readonly" 添加到字段中，然后在一两秒后用 JS 删除，是可行的。绝对不喜欢这个解决方案，但它正在工作?‍♂️。

【参考方案2】：

2021 年 4 月更新：

Chrome 和 Firefox 支持autocomplete="off"

Safari 继续忽略 autocomplete="off"，据我所知，Safari 没有好的解决方案，除了混淆字段名称。

2018 年 2 月更新：

感谢@JamesNisbet 在 cmets 中指出这一点。

根据Chrome team，autocomplete="off" 和 autocomplete="false" 将被忽略。这不是 Chrome 中的临时回归。

Chrome 将尝试自动填充 WHATWG standard on autocomplete 之后的任何表单字段。除了一个例外，它们会忽略“off”和“false”值。

总之，要禁用自动填充，请使用带有不在 WHATWG 列表中的值的 autocomplete 属性。

在this Chromium thread 中说明为什么您认为 autocomplete="off" 不应被 Chrome 忽略。

---

在 Chrome 63 中看起来可能会出现回归。在 Chrome 的原始自动填充文档中：

过去，许多开发人员会在他们的表单字段中添加 autocomplete="off" 以防止浏览器执行任何类型的自动完成功能。虽然 Chrome 仍会尊重此标签的自动填充数据，但不会尊重它的自动填充数据。那么什么时候应该使用 autocomplete="off"？一个例子是当您实现了自己的搜索自动完成版本。

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

它们确实区分了自动完成和自动填充，但不清楚它们是否不同。

Chrome、Safari 和 Edge 都在尝试实现自动填充，但没有明确的标准。他们关注的是名称属性，而不是一个明确的、标准化的属性。

目前autocomplete="something-new" 是一个很好的解决方法，尽管在语法上它没有意义。这似乎可行，因为浏览器无法理解它。

【讨论】：

这是有效的，因为它是一个新规范，告诉浏览器什么类型的数据被填充到给定的字段中。如果浏览器不支持自动完成该类型的数据，它不会尝试（也不会通过查看字段名称和类型来伪造它）参考：bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

从那以后我了解到自动填充是一种完全不同的东西，Chrome 根本不会让你禁用它。自动填充由 Chrome 为您存储的数据组成，例如地址信息和电子邮件地址。自动完成只是将经常输入的信息重新输入表单的“有用”方式。您可以禁用后者，但不能禁用前者。 autofill !== autocomplete

这个答案错过的是，如果您有一个带有 5 个输入字段的表单，如果您在所有字段上应用 autocomplete="none"，它就不起作用。如果您仅将其应用于 4 个字段，则可以。这很疯狂！试试看！

可以确认行为改变。似乎自动完成关闭适用于名称属性不包含此列表中包含的任何属性的输入：html.spec.whatwg.org/multipage/…（即，如果您的名称属性包含“用户名”，则无法禁用自动完成，因为它的自动填充）。这对公共计算机来说是一个相当大的安全风险。

2020 年更新：autocomplete="off" 在 Chrome 中为我工作。

【参考方案3】：

我们尝试了autocomplete="false" 和autocomplete="off"，但都不起作用。但是 Chrome 不理解的东西，比如autocomplete="disabled"，似乎确实有效。奇怪！

更新：从 Chrome 72 开始可以使用。

【讨论】：

这很好用。很有帮助！

这是正确的解决方案！

不适用于 Chrome 68、macOS。

autocomplete="off" 现在从 Chrome 版本 68.0.3440.106（官方版本）（64 位）开始再次运行

在 MacOs 上 chrome 不起作用。

【参考方案4】：

在 Chrome 63 之后，看起来他们将其更改为 autocomplete="disabled"

我建议您获取一个浏览器检测库，其余部分使用 autocomplete="off"

【讨论】：

对我不起作用。仍然获得自动填充。

它对我有用。 off 和 false 不起作用

在 Chrome 67 中，autocomplete="off" 对我有效，而“disabled”则无效。

【参考方案5】：

当前使用 JQuery 的工作解决方案：

从我不想自动填充的输入中删除了名称和 ID，并添加了一个标识类。然后，我使用我想要的字段名称和 id 创建了一个 hidden 输入。然后在表单提交时，我将没有 id 和没有名称的字段中的值（通过我的标识类找到）复制到具有名称和 id 的隐藏字段中。

HTML

<form id="myform">
    <input class="identifyingclass" value="">
    <input class="hidden" id="city" name="city" value="">
    <button type="submit">Submit</button>
</form>

javascript

$('#myform').on('submit', function(e) 
     $("#city").val($('.identifyingclass').val());
);

我认为这应该可以工作，因为除了 id 或 name 之外，我没有看到自动填充锁定到任何东西。

【讨论】：

你说得对，Chrome 只检查 ID 和名称属性

【参考方案6】：

看起来chrome寻找最接近输入的“标签”html标签，并分析标签的值/html以影响输入的自动填充。

我发现禁用输入自动填充的最简洁的解决方法是：

<label for="">Country</label>
<label for="" style="display: none;">hidden label to mislead chrome autocomplete</label>
<input ... />

【讨论】：

为我工作！泰

你是个天才。我已经尝试了所有选项，但没有一个始终可靠。这是有效的，并且在 2020 年仍然有效。我讨厌它，但如果它有效，我不在乎。它是我们需要的代码，而不是我们应得的代码！

天才！比上面提供的替代品好多了。

【参考方案7】：

我能找到的每一个答案都不适合我。关于我的情况，最令人恼火的部分是 android 如何使用登录名填充 notes 字段，从而导致错误的注释被输入到数据库中。

我想过输入文本输入如何清除 Android 自动填充，下面的技巧奏效了。请注意，简单地清除值并不会删除自动完成，我必须设置字段的值。设置值后立即清除值也不起作用。 Android chrome 需要延迟才能看到更改并删除填充的值。

奖励：在 notes 字段上执行此操作会导致 Android 清空我表单中的其他自动完成元素。

<script src="/js/jquery-1.12.1.min.js"></script>
<script>
    $(function () 
        $('#notes').val('--');
        setTimeout(
            function() $('#notes').val(''); 
            , 2000
        );
    );
</script>
<input type='text' id='notes' name='notes' maxlength='250' size='17'>

函数setTimeout( callback, msec )是javascript，因此程序员可以不使用jQuery来实现。

【讨论】：

啊，开车投反对票。 -5 对你没有留下建设性批评的业力。

【参考方案8】：

我已经设法在 Chrome 版本 65.0.3325.162（官方版本）（64 位）中获得了有效的“破解”。

我必须渲染一个输入字段 - 隐藏所以它不会影响我的页面：

<input style="display:none;"/>

然后我呈现我的密码输入字段：

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

所以我的表单最终看起来像：

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

重要的是，您不能在密码类型输入元素中添加名称或 id 属性，并且您必须具有 autocomplete="new-password"

【讨论】：

你知道是否有非密码输入的解决方法吗？

如果不使用JS，不带name属性的这个方法如何提交表单数据？

@Brandito，我想没有 javascript 是不可能的。

@tommybananas，除了密码字段，我没有查看任何其他内容

【参考方案9】：

对于 Angular 用户，由于 autocomplete = 'off' 被新的 chrome 版本忽略，chrome 开发人员建议 autocomplete= 'false | random-string'，因此 google chrome/modern 浏览器有 2 类用户助手 -

autocomplete='off'（阻止上次缓存的建议）。 自动完成 = '假 | random-string'（防止自动填充设置，因为浏览器不知道'random-string'）。

如果禁用这两个烦人的建议该怎么办？这是诀窍：-

在每个输入字段中添加autocomplete = 'off'。 （或简单的 Jquery）。

$("input").attr('autocomplete', 'off');

从 HTML 代码中删除 <form name='form-name'> 标记并将 ng-form = 'form-name' 添加到您的 <div> 容器中。添加ng-form="form-name" 也将保留您的所有验证。

【参考方案10】：

尝试删除输入的“Id”。

我就是这样解决的。

【参考方案11】：

我通过用

替换有问题的输入元素在我的网站上解决了这个问题

<p class="input" contenteditable="true">&nbsp;</p>

并在提交之前使用 jQuery 填充隐藏字段。

但由于 Chromium 的一个错误决定，这确实是一个非常糟糕的 hack。

【参考方案12】：

我通常这样做是为了隐藏自动填充图标：

<div style="width: 0; overflow:hidden;">
    <input type="text" />
</div>

由于 Chrome 会将自动填充图标放置在第一个可写文本字段上，因此该图标将放置在隐藏的输入字段上。

注意：将输入字段设置为隐藏类型或将其显示设置为“无”似乎不起作用。

【参考方案13】：

由于 Chrome 永远不会正常工作和/或不断改变主意（我知道它不是人类），确保自动填充/自动完成停止的最简单解决方案是对您不希望自动填充的任何输入执行以下操作：

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

【讨论】：

自动填充对我不起作用，但我可以看到它对自动填充的工作原理（可能把它们混在一起）所以你可以保留我的 +1

【参考方案14】：

autocomplete="off" 适用于当前的 Chrome 68 以及 Chrome 63。

Demo.

【参考方案15】：

我觉得不同的浏览器如何在相同的功能中使用不同的选项。

如果是 chrome，请使用 autocomplete="disabled" 来处理自动完成和基于地址的自动填充（两个独立的东西）：

element.autocomplete = isGoogleChrome() ? 'disabled' :  'off';

您可以从这里了解如何编写 isGoogleChrome()

JavaScript: How to find out if the user browser is Chrome?