自动完成关闭还是假？

Question

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

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

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

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

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

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

Answer 1

你是对的。将自动完成属性设置为 "off" 不会在 Chrome.

的更新版本中禁用 Chrome 自动填充

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

此行为可能是因为 autocomplete 属性需要 "on" 或 "off" 值，如果您给它其他值，则不会执行任何操作。因此，如果您给它的值不是这些值，则自动填充会下降 apart/doesn 什么都不做。

~~在 Chrome 的当前版本中，发现将自动完成属性设置为 "off" 现在确实有效。~~

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

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

免责声明：这在 Chrome 版本 47.0.2526.106（64 位）

中被发现是正确的

Answer 2

作为对@camiblanch 回答的补充

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

Answer 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" 因为他们认为开发人员过度使用了表格应该自动完成。因此他们去掉了旧方法并让我们使用新方法来确保我们真的不希望它自动完成。

Answer 4

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

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

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

Answer 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 就可以了！

Answer 6

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

Answer 7

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

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

在 chrome 76 上测试并响应 16.9.0

Answer 8

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

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

Answer 9

将自动完成属性同时设置为 true|false 或 on|off 并非在所有情况下都有效。即使您尝试使用占位符也无法正常工作。

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

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

Answer 10

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

JQuery版本：

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

VanillaJS 版本：

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

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

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

Answer 11

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

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

没有超时，Chrome 仍然以某种方式将其重置为关闭状态。

Answer 12

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

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

Answer 13

尝试输入标签：

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

示例：

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

Answer 14

不完美但使用jquery

的有效解决方案

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

Answer 15

autocomplete="one-time-code"

对我有用。

Answer 16

试试这个： .

<input type="text" autocomplete="__away">

自动完成关闭还是假？

Autocomplete off vs false?

html

w3c

google-chrome

autocomplete