自动完成关闭 vs 错误？

Posted 2023-03-05

【中文标题】自动完成关闭 vs 错误？

【英文标题】：Autocomplete off vs false?

【发布时间】：2015-07-15 04:46:00

【问题描述】：

最近我遇到了一个问题，我想在所有浏览器中禁用自动完成功能。

Chrome 在设置中有一项新功能，您可以在其中添加卡号。并且要求也禁用它。

在所有浏览器中起作用的是在表单级别执行 autocomplete=false。

但这不符合 w3 规则，他们强制使用autocomplete=off|on。

有人可以向我解释为什么false 在所有浏览器中都有效吗？

甚至ie8，所有firefox，safari等，但不兼容。

【问题讨论】：

我从另一个帖子中找到了解决方案：***.com/a/38961567/2038779

Disabling Chrome Autofill的可能重复

Autocomplete Off is completely Ignored 和 Autocomplete populating wrong field 的可能重复

【参考方案1】：

你是对的。将 autocomplete 属性设置为“off”不会在最新版本的 Chrome 中禁用 Chrome 自动填充功能。

但是，您可以将自动填充设置为“on”或“off”（“false”、“true”、“nofill”）之外的任何内容，它会禁用 Chrome 自动填充。

这种行为可能是因为 autocomplete 属性需要一个“on”或“off”值，如果你给它其他东西，它不会做任何事情。因此，如果您给它提供的不是这些值，自动填充就会崩溃/不做任何事情。

在当前版本的 Chrome 中，已经发现将自动完成属性设置为“关闭”现在确实有效。

另外，我发现这只有在表单的每个<input> 标记中设置自动完成属性时才有效。

已在 Chromium 错误列表 here 中对这种歧义作出回应。

免责声明：在 Chrome 版本 47.0.2526.106（64 位）中发现这是真的

【讨论】：

@pauel 我很难复制此解决方案不起作用的行为。您能否发布一个不起作用的示例？

我发现“false”不起作用，但“off”起作用。我正在使用 Chrome 46.0.2490.71

@seesharper 我可以确认您所说的行为。我猜必须在更新版本的 chrome 中修复。有趣

自动完成属性的值似乎不适用于 Chrome 62。尽管有自动完成值，但 Chrome 62 坚持自动完成输入。

为了禁用所有输入标签，我使用了：jQuery("input").attr("autocomplete", Math.random());

【参考方案2】：

作为@camiblanch 答案的补充

添加autocomplete="off"is not gonna cut it. 将输入类型属性更改为type="search"。 Google 不会对具有某种搜索类型的输入应用自动填充。

【讨论】：

你不应该使用搜索而不是搜索。

您不能使用搜索字段替代文本字段。它们甚至在 Safari 上看起来也不同。它们看起来像带有圆角和重置按钮的搜索字段。

你只会让你的生活更加艰难，因为也许明天搜索字段会因为新的操作系统更新而看起来像一条龙。我将$(':input', this.$formElement).attr('autocomplete', 'off'); 用于关键表单。在 Chrome 中工作。

Jquery 的 attr autocomplete off 或 autocomplete=off 在 chrome（版本 46.0.2490.80 m（64 位））中都不适合我。 False 正在工作，但似乎被视觉工作室覆盖......这对我有用。

@highmaintenance 在即将到来的 Chrome 更新中确认，搜索输入将是龙。

【参考方案3】：

使用 autocomplete="my-field-name" 代替 autocomplete="off"。小心你所说的，因为有些值仍然可以识别，比如 autocomplete="country"。我还发现在一些棘手的场景中使用占位符属性会有所帮助。

示例： <input type="text" name="field1" autocomplete="my-field-name1" placeholder="Enter your name">

Chrome 最近停止使用 autocomplete="off"，因为他们认为开发人员过度使用了它，而他们并没有过多考虑表单是否应该自动完成。因此，他们淘汰了旧方法并让我们使用新方法，以确保我们真的不希望它自动完成。

【讨论】：

你有任何链接指向任何关于此的引用/文章/讨论吗？

没关系，找到了：bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

【参考方案4】：

$("#selector").attr("autocomplete", "randomString");  

这对我来说每次都很可靠。

注意：我已在模态显示事件中调用了此 LOC。

【讨论】：

您是否正在为表单视图生成随机字符串？

@Raghav 你能创建 jsfiddle 并告诉我们你正在开发什么版本吗？

@Raghav 你似乎是对的。这是jsfiddle。 jsfiddle.net/doeL0t1g/14

codementor.io/@leonardofaria/…

这个即使没有 jQuery 也对我有用，只需在 html 文本输入字段中添加属性。

【参考方案5】：

Chrome 72.XX 之后：

Chrome 会忽略字段和表单级别的 autocomplete="off" autocomplete="no-fill" 或 autocomplete="randomText"。

我发现的唯一选择是通过欺骗 Chrome 在虚拟文本框和密码上填充自动填充，然后从用户视图中隐藏它们来遵循解决方法。

记住带有style="display: hidden" 或style="visibility: hidden" 的旧方法也会被忽略。

修复：

因此，使用height: 0px;overflow:hidden 创建一个DIV，它仍将呈现HTML 元素，但将它们隐藏在用户视图之外。

示例代码：

<div style="overflow: hidden; height: 0px;background: transparent;" data-description="dummyPanel for Chrome auto-fill issue">
        <input type="text" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyUsername"></input>
        <input type="password" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyPassword"></input>
</div>

只需在 HTML 表单中添加上述 div 即可！

【讨论】：

为什么 Chrome 工程师似乎认为他们比实际在 Web 上构建网站的人更了解并不断寻找重新启用自动完成功能的方法？傲慢是惊人的。

@JAC 并非总是如此。刚刚在 Chrome 74 中测试了一个表单，然后更新到 Chrome 75，无论 autofill 属性中的内容是什么，自动填充确实出现在它们两者中。在某些情况下，包括个性化，Chrome 提供自动填充功能，在此过程中完全覆盖了我很酷的日期选择器日历。还没有测试用例。

Chrome 变得几乎和 IE 一样烦人。

codementor.io/@leonardofaria/…

示例代码有一个错字：外部 需要 "overflow: hidden" -- "overflow: none" 不是一个东西。

【参考方案6】：

autocomplete="none" 完美适用于 angularjs 和 angular 7

【讨论】：

不再。铬 75

try autocomplete="chrome-off" 它在 chrome v84 中对我有用

@EduardVoid 用 chrome 84 试过了，没用

【参考方案7】：

除 off 和 false 之外的自动完成值。

autoComplete="nope" autoComplete="foo" autoComplete="boo" autoComplete="anythingGoesHere"

在 chrome 76 上测试并反应 16.9.0

【讨论】：

codementor.io/@leonardofaria/…

@JoyAcharya 这解决了我使用 Chrome 的自动填充功能的问题。这应该是推荐的解决方案。

【参考方案8】：

如果有人阅读本文并且在为新用户禁用用户名和密码字段的自动完成时遇到困难，我发现设置 autocomplete="new-password" 在 Chrome 77 中有效。它还阻止了用户名字段自动完成。

参考：https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

【讨论】：

同意 autocomplete="new-password" 是迄今为止解决这个 Chrome 问题的最简单的解决方法

【参考方案9】：

将 autocomplete 属性设置为 true|false 或 on|off 并非在所有情况下都有效。即使您尝试使用占位符，它也不起作用。

我尝试使用 autocomplete="no" 来避免使用 chrome 自动填充插件。

这个 autocomplete="no" 应该写在输入行内，例如

【参考方案10】：

虽然它可能不是最优雅的解决方案，但这对我有用：

jQuery 版本：

$("input:-internal-autofill-selected").val('');

VanillaJS 版本：

document.querySelectorAll("input:-internal-autofill-selected").forEach(function(item)item.value = '';)

当 Chrome 自动填充输入字段时，这些字段会获得一个内部伪元素 -internal-autofill-selected（这也为输入提供了浅蓝色背景）。我们可以使用这个伪元素作为选择器来撤销 Chrome 的自动完成/自动填充。

请注意，当加载 DOM 后 Chrome 会自动填充时，您可能（取决于您的实现）需要在超时中包装您的代码。

【参考方案11】：

现在是 2020 年，如果有人仍然像我一样挣扎。对我有用的唯一解决方案如下，将自动完成设置为任何随机字符串会禁用自动完成，但它只有在页面加载后完成时才有效。如果将该随机字符串保留为默认值，那么 chrome 会烦人地将其设置为关闭。所以对我有用的是（我正在使用 jquery）在文档就绪事件上，我添加了以下内容，

window.setTimeout(function () 
        $('your-selector').attr('autocomplete', 'google-stop-doing-this');
, 1000);

没有超时，Chrome 仍会以某种方式将其重新设置为关闭。

【参考方案12】：

如果您的表单中有任何“密码类型输入”，您可以试试这个；

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

【参考方案13】：

在输入标签上试试这个：

readonly onfocus="this.removeAttribute('readonly');

例子：

<input type="text" class="form-control" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');">

【参考方案14】：

使用 jquery 的不完美但可行的解决方案

$(document).ready(function()
   if (navigator.userAgent.indexOf("Chrome") != -1) 
      $("#selector").attr("autocomplete", "nope"); // to disable auto complete on chrome
   
)

【参考方案15】：

autocomplete="one-time-code"

为我工作。