编程实现禁用Chrome自动填充功能

Question

网络上有些讨论（尤其是在stackoverflow上），但其中很多内容都来自2015年左右，因此我想知道是否有人有最近的经验。

我们使用JavaScript小部件在Web表单上提供类型前置搜索功能，但这个UI界面始终被Chrome自动填充所覆盖。

虽然autocomplete=“off”曾经管用，但现在Chrome似乎忽略了这个值，并仍然显示UI界面。我发现在OSX上，与Chrome 66/67配合使用的唯一可行方法是使用无效值，例如autocomplete=“blah”。不过这种方法看起来过于靠不住，我们之前试过，它在某些情况/Chrome版本下会被忽略。

有人找到了使用HTML/Javascript可靠的关闭方法吗？

顺便说一句——看起来即使是Google自己也无法在需要时关闭它，因为他们自己的Google地图类型前导小部件也会被Chrome自动填充所覆盖。这可以在大多数Shopify商店中看到。

- HenrikV

---

https://dev59.com/1GUo5IYBdhLWcg3w1yPH - Joe Warner

https://dev59.com/EFUL5IYBdhLWcg3waHVw#50571447 - Firefly

从来没有遇到过任何问题，但如果其他方法都失败了，你可以使用 div[contenteditable] ；-) - René

Answer 1

autocomplete="off"不再起作用。截至2019年，唯一有效的是autocomplete="new-password"

请查看Chromium项目上的此链接https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

为用户名添加一个值为username的自动完成属性。

如果您实现了“电子邮件优先”登录流程，将用户名和密码分开到两个单独的表单中，请在用于收集密码的表单中包含一个包含用户名的表单字段。当然，如果适合您的布局，您可以通过CSS隐藏此字段。

在登录表单上的密码字段上添加一个值为current-password的自动完成属性。

在注册和更改密码表单上的密码字段上添加一个值为new-password的自动完成属性。

如果您要求用户在注册或更新密码期间输入密码两次，请在两个字段上都添加new-password自动完成属性。

<form id="login" action="signup.php" method="post">
  <input type="text" autocomplete="new-password">
  <input type="password" autocomplete="new-password">
  <input type="submit" value="Sign Up">
</form>

- Hari Das

---

这应该是被接受的答案。看起来Chrome似乎不断改变他们隐藏这种类型字段的方式。 - William

似乎只有密码输入需要它。 - Shea

Answer 2

jquery.disable-autofill

禁用Chrome的自动填充功能。当您不想让浏览器自动填充用户名/密码输入时，这非常实用于CRUD表单。

使用方法：

<form>
  <input type="input" name="username" autofill="off" autocomplete="off">
  <input type="password" name="password"  autofill="off" autocomplete="off">
</form>

<script src="jquery.disable-autofill.js"></script>
<script>
  $('input[autofill="off"]').disableAutofill();
</script>

https://github.com/biesbjerg/jquery.disable-autofill

- mohammed hekal

---

你的答案 $('input[autofill="off"]).disableAutofill(); 缺少一个单引号。 - User

哈哈，jQuery 是被选中的答案？ - Nebulosar

Answer 3

你只需要在密码字段中添加autocomplete="new-password"，就可以了。 那样应该能正常工作！

- Evading Shadows

---

比上面的jQuery代码工作得更好，而且代码要少得多。 - David Cyr

@DavidCyr 您可以使用一行jQuery代码实现相同的效果。$('input').attr("autocomplete", "new-password"); - User

注意：这在火狐浏览器中还不起作用（请参见MDN）。@User他并不反对jQuery本身，而是反对disableAutofill插件。 - Kalaschni

无法在Chrome 2019中工作。它关闭了Chrome的多字段自动完成功能，并启用了单字段自动完成功能。 - Brian McGinity

2019年11月。Chome 78.0.3904.97（官方版本）（64位）。对我来说运行得很好。 - PaulM

哇！太感谢了——这个方法真是神奇，值得给予最佳答案的勾选。 - Nomeh Uchenna Gabriel

Answer 4

我使用autocomplete="nope"解决了这个问题。

<input type="text" autocomplete="nope" />

- ltvn

---

这对我也起作用了，对于非密码字段，我更喜欢这个而不是“new-password”！ - Sean Haddy

这对我有用，谢谢。 - Hassan Raza

Answer 5

对于React，您可以这样做 -

<input id={id} name={'a'+Math.random()} type="text" />

如果你只需要通过id在其他地方访问输入值，例如：

const value = document.getElementById(id)

（这部分是 jQuery 禁用自动填充插件的工作原理之一）。

- Brian Burns

---

我使用了这个方法，但是将随机字符串放在自动完成值的末尾。已经运行了一年多，每次都有效。 - Mike Kormendy

Answer 6

我可以用这段代码解决它：

<form autocomplete="off">
 <input type="text" name="text" autocomplete="off" spellcheck="off" autocorrect="off"/>
</form>

- Patrik Laszlo

Answer 7

工作对我来说很重要

  <input [name]="nameControl" type="text" autocomplete="new-password">

在组件中：

  this.nameControl = "name" + this.getRandomInt();

  getRandomInt() {
    return Math.floor(Math.random() * Math.floor(100));
  }

- Rinat

---

欢迎来到Stack Overflow @Rinat！请尽量只添加之前未列出的答案。同样的答案已经被多次列出。提醒一下，谢谢！ - dave4jr

Answer 8

目前（2019年5月），只有autocomplete="new-password"可以正常工作。

例如，可以使用jQuery进行编程：

$('form, input, select').attr('autocomplete', 'new-password');

- Jul

Answer 9

在2019年9月使用jQuery。我所做的唯一接近于禁用整个表单自动完成/自动填充的一致性措施：

$('.disable-autofill').focus(function () {
    $(this).attr('autocomplete', 'new-password');
});
$('.disable-autofill').blur(function () {
    $(this).removeAttr('autocomplete');
});

然后将类应用到您的输入框，例如：

：

<input name="first_name" class="disable-autofill">

您需要移除该属性，因为如果太多的输入框都有 autocomplete 属性，Chrome 浏览器将不再关注它 :)

- kdion4891

Answer 10

使用 autocomplete="off" 禁用自动完成 autocomplete

并使用 type="search" 禁用地址自动填充 autofill

- Fulvio Schiano

---

如果type="tel"会怎样？ - mediaguru