如何在2020年后禁用Chrome自动填充功能

Question

最近我碰到了几次这个问题，Chrome忽略autocomplete="false"和autocomplete="off"。如果之前有人提交带有随机“hack”的表单，它甚至会忽略autocomplete="whatever"或任何你用来欺骗它的东西。

在试图解决这个问题时，我遇到了此StackOverflow问题，但如果之前已经提交过包含该字段的表单，则无法解决该问题。

编辑：这不是针对密码字段的。

- 3Dom

---

@JosephSible-ReinstateMonica 这并不是破解密码管理器，这也不是用于密码字段的。我的网络应用程序不能自动完成此字段。这不是一个选项。Chrome需要开始尊重HTML规范中的指令。这不是用于密码字段。此外，密码字段已设置type="password"，这将使此黑客攻击无效。 - 3Dom

@Stuart，浏览器不能规定设计师如何使用字段。如果关闭选项在工具集中存在，则应该起作用，并且浏览器应服从指令。它不应该像某种全能的独裁者一样创建自己的规则。 - 3Dom

@Stuart，“你违反了WCAG 2.1中的规则1.3.5：识别输入目的”。这不是HTML标签的作用吗？自动完成旨在帮助浏览器在表单中提供自动化，而不是向用户识别字段（请参见https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete）。特别注意：“让Web开发人员指定用户代理是否有权提供自动化协助来填写表单字段值”。 - Francois Carstens

@FrancoisCarstens 嗯，有点是有点不是。autocomplete="off" 的价值只是意味着我不会告诉你这个字段是用来做什么的，而不是不要尝试填写它。所以如果你是一个邪恶的网站开发者，你会将其设置为 off，从而使你的网站用户感到沮丧，并获得更多的不准确的数据输入。关键是所有浏览器和密码管理器仍然会填充带有 autocomplete="off" 的字段，因此最好将其设置为您期望的数据的正确值。 - Stuart

我有一个名字文本字段，并使用Ajax提供自动完成（约20,000个选项），但Chrome会干扰无关数据？WCAG会告诉我们什么是好的或不好的吗？ - fcm

Answer 1

我在一个字段名称中带有“number”这个词的问题上遇到了困难，导致信用卡自动填写对话框被触发。这个解决方案帮助我摆脱了这个问题。

尽管这不是选项的预期使用方式，但我认为这不太可能出现故障，并且可以在没有JavaScript Hack的情况下工作。一次性代码不会触发自动填充，所以我将不希望自动填充的字段视为一次性代码。

<input type="text" name="number" autocomplete="one-time-code" />

这对我起了作用。我在Chrome 87.0.4280.141中测试过，它运行良好。

- risutoru

---

对我来说，只需包含name属性即可防止自动完成建议的显示。 - Kai Durai

使用<input name='' />的技巧完成了工作，谢谢！ - Dariusz Legizynski

Razor Pages 给所有东西都加上了一个名称，但这并没有缓解它。 - J_sdev

根据您的答案，autocomplete="one-time-code" 对我想禁用的所有字段都起作用了，包括密码 - 谢谢！ - DCX

对我也不起作用，但它停止了上面用户名字段的自动完成 :D - Richard Toth

Answer 2

对于我而言，autocomplete="new-password"并设置placeholder属性为一些文本就可以了。

<input name="name1" placeholder="Nº" type="text" autocomplete="new-password" />

- Pipebugs

---

这个对我有效，而大多数其他的都没有。 （截至2020年1月6日）- 是否有任何指示或文档说明为什么“new-password”实际上可以防止自动完成，而没有其他属性/值组合似乎起作用。此外，我似乎不需要占位符值就能使其正常工作。 - bobbysmith007

谢谢。运行得很好。希望 Google 不会很快“修复”它。 - Oleksandr Fomin

Answer 3

每当我找到一个解决方案时，Chrome又会再次扰乱我的计划。

不再起作用

• autocomplete="new-*"
• 在第一个<form>元素之前添加一个屏幕外定位的虚假输入元素style="position: fixed;top:-100px;left:-100px;"
• 设置<form autocomplete="off">
• 使用<textarea> 并将其样式设置为字段

解决方案（2021年7月15日）

附加一个没有name属性的虚拟<input>并将原始<input>类型设置为“hidden”

HTML

<input type="hidden" name="myfield" class="no-autofill"> <input>

请注意任何事件，（click，blur，focus），这些事件可以显示您的自定义自动填充应添加到可见的 <input> 元素中。

然后添加一个 change 事件将值同步到隐藏的输入框中。

const fields = document.querySelectorAll('input.no-autofill');
for (const field of fields) {
  const dummy = field.nextElementSibling;
  dummy.addEventListener('change',e => {
    field.value = e.target.value;
  });
}

在实施之前，请确保访问Chromium bug跟踪器，并告诉Chrome开发人员遵循标准的重要性。这样，总有一天我们可以直接使用：

<input name="myfield" autocomplete="off">

- dehart

---

谢谢，这是我今天能找到的唯一可行的解决方案。 - craig_nelson

抱歉，Craig，过了一会儿这个解决方案开始显示自动填充。我要更改这个答案。 - dehart

唯一可行的解决方案。我已经尝试了所有的方法。谢谢。 - Roman

Answer 4

它在我的本地机器上运行良好，请尝试...

<input type="email" class="form-control" id="email" name="email" placeholder="Enter Email"  readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;">

- Mohammad Malek

---

这个解决方案的问题在于输入框被禁用了，光标也是。 - mediaguru

Answer 5

2021年11月，我尝试了多种非JavaScript解决方案，但都无法解决与地址相关的字段问题。而实际上有效的方法是更改标签中的文本。

在Chrome浏览器中，如果以下条件满足，则会显示自动完成对话框：

- 标签中以“Address”开头或结尾； - 页面中至少有两个其他地址字段（似乎可以放置在页面的任何位置）。

编辑提示：如果在标签中单词“Address”的中间插入零宽连接符字符实体，则可以抑制自动完成对话框！

例如，将标签设置为Addres‍s。

html, body {
  font-family: 'Helvetica', Sans-Serif;
  font-weight: 200;
  line-height: 1.5em;
  padding: 1em;
}

<div class="addressDiv">
  <div>
    <label>Focus on this field...Address</label>
    <div>
      <input autocomplete="off" type="text" aria-autocomplete="none" autocapitalize="none" />
    </div>
  </div>
  <div>
    <label>State</label>
    <div>
      <input autocomplete="address-level1" type="text" value="">
    </div>
  </div>
  <div>
    <label>City</label>
    <div>
      <input autocomplete="address-level2" type="text" value="">
    </div>
  </div>
</div>
<p>
See <a href="https://jsfiddle.net/f490h2s6/">this JSFiddle</a>
</p>

- cobberboy

---

如果使用本地化文本，这也不是一种解决方法：特殊字符只是被转义了。 - Alexander

Answer 6

简洁明了的答案，只需编辑“selectorForYourInputs”，就可以很好地运行，经过跨浏览器测试，最大开销为50ms，用户从未注意到任何性能滞后：

counter = 0;
emptySearchboxInterval = setInterval(() => {
  $(selectorForYourInputs).val("");
  counter++;
  counter == 100 ? clearInterval(emptySearchboxInterval) : null;
}, 20);

- nikhil swami

Answer 7

为了防止Chrome弹出窗口中的“管理地址”级别： autocomplete ='chrome-off' 如果您可以做到，为了防止自动建议弹出窗口：排除name和id属性。

- Sam S

Answer 8

对于我来说，问题只会在我有多个具有相同值的autocomplete字段时出现。如果我将该值设置为随机数（Math.random()），则不会发生自动完成。我认为也可以使用一个唯一的字符串。

- Stephan Hoyer

---

这对我有用。在输入字段中，我设置了name =“{Math.random（）} -false”，这禁用了Chrome中的自动完成。 - B-Rad

Answer 9

在使用该方法前，请阅读底部的注意事项

经过长时间的努力，我通过以下方式成功地使它可靠运行：

重要的是，您的输入类型必须为“文本”！

定义一个CSS类

注意事项：请勿删除HTML标签。

input.hidden-password {
  -webkit-text-security: disc;
}

然后在您的表单中，将自动完成关闭，输入类型设置为“文本”，并将类添加到输入框中。

<form autocomplete="off">
    <input
      type = "text" // <----This is important
      class = "hidden-password"
    />
</form>

来吧，谷歌，让我们控制自己的输入！我的客户要求经常更改密码，自动填充绝对不行！

---

重要提示 不要在登录或任何需要安全性的地方使用此功能。我在我的应用程序中使用它作为表单，用户已经通过身份验证并且不需要安全性。

---

- Thales Kenne

---

上周对我来说它完全没问题。你导入了 CSS 文件并将类应用到输入框中了吗？ - Thales Kenne

无 CSS 解决方案 https://github.com/terrylinooo/disableautofill.js - Terry Lin

Answer 10

干脆不要提交表单怎么样？什么都不需要记忆！
你的应用程序可能无论如何都没有JavaScript工作，对吧？

实际上，根本不要使用表单，只需收集输入值、序列化并执行Ajax调用。

$('#mybutton').on('click', function (e) {
    $.ajax({
        type: "POST",
        url: 'mybackend',
        data: $('#formdiv input').serialize(),
        success: function (data) ...

请注意，这不是一个经过充分测试的想法，只是我在需要自动填充时观察到的一些东西，而我没有在任何处理此问题的许多主题中看到建议。

- Alias_Knagg