自动完成关闭 vs 假？

Question

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

Chrome浏览器有一个新的设置功能，你可以添加卡号，但是要求也需要禁用自动完成功能。

在所有浏览器中可行的方法是在表单级别上做 autocomplete=false。

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

请问有谁能解释一下为什么 false 在所有浏览器中都能工作？

即使是ie8、所有火狐浏览器、safari等，但它并不符合规范。

- Cross2004

---

我从另一个帖子中找到了解决方案：https://dev59.com/Imct5IYBdhLWcg3wEJcm#38961567 - Gir32

可能是禁用Chrome自动填充的重复问题。 - Gajus

可能是Autocomplete Off is completely Ignored和Autocomplete populating wrong field的重复问题。 - Michael Schober

Answer 1

你说得没错。将自动填充属性设置为“off”在较新版本的Chrome中并不能禁用Chrome自动填充。

但是，您可以将自动填充设置为除“on”或“off”之外的任何值（如“false”，“true”，“nofill”），这将禁用Chrome自动填充。

这种行为可能是因为自动填充属性只接受“on”或“off”值，如果您提供其他值，则不会有任何作用。因此，如果您提供其他值，自动填充会停止工作/不起作用。

在当前版本的Chrome中，已发现将自动填充属性设置为“off”实际上确实起作用了。

另外，我还发现，只有在表单的每个<input>标记中设置自动填充属性才起作用。

在Chromium错误列表的这里已经对这种模糊性进行了回应。

免责声明：这适用于Chrome版本47.0.2526.106（64位）

- camiblanch

---

@pauel 我很难复制这个解决方案不起作用的行为。你能否发布一个示例，说明这个解决方案不起作用？ - camiblanch

我发现“false”不起作用，但“off”可以。我正在使用Chrome 46.0.2490.71。 - see sharper

@seesharper 我可以确认你所说的行为。我猜这可能已经在更近期的Chrome版本中得到修复了。有趣。 - camiblanch

Chrome 62似乎无法使用自动完成属性。尽管设置了自动完成的值，但Chrome 62仍会自动填充输入框。 - Crystal Miller

为了禁用所有输入标签的自动完成功能，我使用了以下代码： jQuery("input").attr("autocomplete", Math.random()); - Azghanvi

Answer 2

在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，它就应该起作用！

- Adheep Mohamed Abdul Kader

---

为什么Chrome工程师似乎认为他们比实际建造网站的人更懂，不断寻找重新启用自动完成的方法？这种傲慢令人震惊。 - MgSam

@JAC 不总是这样。我刚在Chrome 74中测试了一个表单，然后更新到Chrome 75，无论自动填充属性中有什么，它都会出现在两者中。在某些情况下，包括个性化，Chrome会提供自动填充功能，完全覆盖我的酷日期选择器日历。我还没有测试用例。 - Matvey Andreyev

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

https://www.codementor.io/@leonardofaria/disabling-autofill-in-chrome-zec47xcui - Joy Acharya

示例代码有一个错别字：外部的<div>需要"overflow: hidden" -- "overflow: none"不是一个有效的属性。 - tylerl

这是什么意思，先生？ - Pulkit Pahwa

Answer 3

请使用 autocomplete="my-field-name" 代替 autocomplete="off"。注意要小心取名，因为有些值仍然被识别，例如 autocomplete="country"。在一些棘手的情况下，我发现使用 placeholder 属性会有所帮助。 示例： <input type="text" name="field1" autocomplete="my-field-name1" placeholder="请输入您的姓名"> 最近 Chrome 停止使用 autocomplete="off" ，因为他们认为它被开发人员过度使用，而这些开发人员并没有考虑表单是否应该自动完成。因此，他们取消了旧方法，并让我们使用新方法，以确保我们真的不想自动完成表单。

- blairzotron

---

你有关于这个的引用、文章或讨论的链接吗？ - Jacob

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

Answer 4

如果有人正在阅读这篇文章并且在尝试禁用新用户的用户名和密码字段的自动填充功能时遇到困难，我发现在Chrome 77中设置autocomplete="new-password"可以解决这个问题，它还可以防止用户名字段自动填充。

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

- wintel-warrior

---

同意autocomplete="new-password"是解决Chrome问题最简单的方法。 - Laszlo Sarvold

Answer 5

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

这对我来说每次都可靠地运作。

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

- Kishor Pawar

---

你是否为每个表单视图生成随机字符串？ - user4563161

@Raghav，请你能否创建一个 jsfiddle 并告诉我们你正在使用的版本？ - Kishor Pawar

@Raghav 你似乎是对的。这里是 jsfiddle。https://jsfiddle.net/doeL0t1g/14/ - Kishor Pawar

https://www.codementor.io/@leonardofaria/disabling-autofill-in-chrome-zec47xcui - Joy Acharya

这个对我来说甚至不需要jQuery，只需在HTML文本输入字段中添加属性即可。 - Drk_alien

Answer 6

自动完成的值除了off和false之外也是可行的。

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

在Chrome 76和React 16.9.0上进行了测试。

- Rajendran Nadar

---

https://www.codementor.io/@leonardofaria/disabling-autofill-in-chrome-zec47xcui - Joy Acharya

@JoyAcharya 这解决了我在Chrome的自动填充功能上遇到的问题。这应该是推荐的解决方案。 - Daniel Harris

Answer 7

试试这个： 。

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

- Jawad Altaf

---

这甚至适用于React Native的TextInput与react-native-web。autoComplete="__away" - Andre Song

Answer 8

现在已经是2020年，如果有人和我一样仍然在为此苦苦挣扎，那么唯一有效的解决方案是将自动完成设置为任意随机字符串，这将禁用自动完成，但前提是必须在页面加载后完成设置。如果将该随机字符串保留为默认值，则Chrome将讨厌地将其重置为关闭状态。因此，对于我来说有效的方法是在文档准备就绪事件上（我正在使用jquery），添加以下代码：

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

如果没有超时设置，Chrome 在某种程度上仍会将其重置为关闭状态。

- blisssan

Answer 9

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

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

- Önay Yalciner

Answer 10

尝试在输入标签上使用这个：

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

例子：

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

- Amit Lahoti