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

Question

我碰到这个问题绊了几次，在过去的一段时间，在那里铬忽略autocomplete="false"和autocomplete="off"。autocomplete="whatever"如果有人之前提交过带有随机“hack”的表单，它现在甚至会忽略或您做任何事情来欺骗它。

在尝试解决此问题时，我遇到了这个 StackOverflow 问题，如果您之前提交过包含此字段的表单，它并不能解决问题。

编辑：这不适用于密码字段。

Answer 1

autocomplete="new-password" 并设置占位符属性和一些文本对我有用。

\n

<input name="name1" placeholder="N\xc2\xba" type="text" autocomplete="new-password" />\n

\n

Answer 2

我在名称中包含“数字”的字段中遇到了这个问题，这会触发信用卡自动完成对话框。这个解决方案帮助我摆脱了它。

尽管这不是该选项的预期用途，但我认为这不太可能在没有 JavaScript Hacks 的情况下破坏和工作。一次性代码不会触发自动完成，因此我将不应自动完成的字段视为一次性代码。

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

这对我有用。我在 Chrome 87.0.4280.141 中测试了它，它工作正常。

Answer 3

每当我找到解决方案时，Chrome 就会再次对工作产生影响。

不再工作

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

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

追加一个<input>没有name属性的虚拟对象并使原始<input>type="hidden"

超文本标记语言

<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 错误跟踪器 并告诉 Chrome 开发人员为什么遵循该标准很重要。所以有一天我们也许可以使用：

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

Answer 4

这是目前对我有用的 JS 解决方案：

<input name="name" type="text"
        onfocus="this.__name = this.getAttribute('name'); this.removeAttribute('name')"
        onblur="this.setAttribute('name',this.__name)"
        >

上面的 js 代码将输入名称存储到 this.__name 中，并在名称恢复onfocus后删除该onblur名称，以便表单可以按预期工作，但 chrome 不会自动填充。