Question

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

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

在所有浏览器中都有效的方法是在表单级别执行autocomplete = false。

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

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

甚至ie8，所有firefox，safari等。但是不符合。

Answer 1

你是对的。将自动完成属性设置为＆＃34;关闭＆＃34;不会在较新版本的Chrome中停用Chrome自动填充功能。

但是，您可以将自动完成设置为＆＃34; on＆＃34;或者＆＃34;关闭＆＃34; （＆＃34; false＆＃34;，＆＃34; true＆＃34;，＆＃34; nofill＆＃34;），它会停用Chrome自动填充功能。

这种行为可能是因为自动完成属性需要＆＃34; on＆＃34;或者＆＃34;关闭＆＃34;价值并没有做任何事情，如果你给它别的东西。因此，如果你给它一些不同于那些值的东西，自动填充就会崩溃/什么都不做。

~~使用当前版本的Chrome，我们发现将自动完成属性设置为＆＃34; off＆＃34;实际上现在有效。~~

此外，我发现只有在表单的每个<input>标记中设置自动填充属性时才能使用此功能。

Chromium bug列表here中存在这种含糊不清的回应。

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

Answer 2

Chrome 72.XX版之后：

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

我发现的唯一选择是遵循一种变通方法，即欺骗Chrome浏览器在虚拟文本框和密码上填充自动填充功能，然后从用户视图中隐藏它们。

请记住，使用style="display: hidden"或style="visibility: hidden"的旧方法也将被忽略。

FIX：

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

示例代码：

<div style="overflow: none; 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 3

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

每次我都能可靠地工作。

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

Answer 4

使用 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 5

如果有人阅读此书，并且在为新用户禁用用户名和密码字段的自动完成功能时遇到困难，我发现在Chrome 77中可以设置autocomplete =“ new-password”。这也阻止了用户名字段自动完成。

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

Answer 6

自动完成值，除关闭和错误处理外。

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

在chrome 76上测试并反应16.9.0

Answer 7

现在是2020年，如果有人像我一样还在努力挣扎。唯一适用于我的解决方案如下，将autocomplete设置为任何随机字符串都将禁用autocomplete，但是只有在页面加载后完成时才起作用。如果该随机字符串保留为默认值，则chrome会烦人地将其设置为关闭。所以对我有用的是（我正在使用jquery）文档准备事件，我添加了以下内容，

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

在没有超时的情况下，Chrome仍会以某种方式将其重置为关闭状态。

Answer 8

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

Answer 9

在所有情况下都不能将autocomplete属性设置为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自动完成/自动填充功能。

请注意，由于DOM加载后Chrome会自动填充，因此您可能需要（取决于实现方式）将代码包装成超时状态。

Answer 11

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

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

Answer 12

在输入标签上尝试一下：

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

示例：

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

Answer 13

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

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

Answer 14

autocomplete="one-time-code"

为我工作。

Answer 15

您可以像下面这样在代码中添加一个JS脚本：

    $(document).ready(function() {
        setTimeout(function() {
            $("#email, #password").val('').change();
        }, 500);
    });

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<input type="email" name="email" id="email" placeholder="Email" />
<br><br>

<input type="password" name="password" id="password" placeholder="Password" />

Answer 16

作为@camiblanch回答的补充

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

自动完成关闭与错误？

16 个答案: