有没有一种方法可以禁用 Chrome 自动填充选项来针对 Angular 表单字段？

Question

我已经尝试了使用autocomplete false和auto complete off。缓存已从字段中删除，但我仍然看到chrome自动填充数据。是否有一种方法可以在angular表单中禁用chrome自动填充选项？任何建议都将不胜感激。谢谢

- Shaik Nizamuddin

---

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

Answer 1

请查看autocomplete="new-password"：

<input type="password" name="password" value=""  autocomplete="new-password" />

这对我很有效。在Google文档中找到。

- Panos

---

谢谢！它对我来说完美地运行了，尽管我不喜欢我们在这里使用预设计的语义 :-\ - Server Khalilov

对我来说，在Angular 8中工作@Matheno，确切地说是8.1.3。 - CularBytes

在 Angular 11 中工作过！谢谢！ - Eduardo Mauro

我在 Angular 12 响应式表单的所有字段中使用了 autocomplete="no-autocomplete-thanks"，其中一些是由我自己管理的 matAutocomplete，运行得非常完美，谢谢！ - Eric Malalel

Answer 2

autocomplete="off"对Chrome浏览器有效，但您所遇到的是Chrome自动填充功能接管了它，忽略了autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill。

过去，许多开发人员会将autocomplete="off"添加到表单字段中，以防止浏览器执行任何类型的自动完成功能。虽然Chrome仍将尊重此标签以获取自动完成数据，但不会尊重它以获取自动填充数据。

一种解决方法是在autocomplete中放入未知值，例如<input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />。在测试中，这对我大部分时间都有效，但出于某种原因之后不再有效。

我的建议是不要与其对抗，而是通过正确使用autocomplete属性来利用其潜力，如此处所述：https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

- Ayoub k

---

谢谢，我会尝试的。 - Shaik Nizamuddin

“不要与之对抗”确实是一个好建议。如果Chrome这样做，那可能是一个好的功能。谢谢分享。 - moreirapontocom

但是对于“自动完成”字段，它会导致出现两个面板（自动填充+标准面板），这很疯狂。 - Eugen Tatuev

我成功地通过将任意无意义的值设置为“autocomplete”来禁用了Chrome上的自动填充。例如，autocomplete="no"。我还成功尝试了“no”，“*”，“nope”，“sdjlf”，“!”。这对我来说似乎不太合理，但它确实起作用了。 - Max Oriola

有时候你需要"与之斗争"，一个完美的例子是当你作为管理员为另一个用户创建用户帐户或作为人力资源经理接受新员工入职时，Chrome会坚持将管理员的地址等详细信息塞入不适合他们的字段中。 - Rob

@Rob 我也遇到了同样的问题，通过设置autocomplete="off"、name="one-time-code"和id="one-time-code"来解决了它。 - sasa suboticki

Answer 3

通过一些试验和错误的测试，发现如果将输入框的名称和自动填充属性设置为随机字符串，则可以防止 Chrome 的自动填充出现。我创建了一个小指令来实现这个功能。

import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[appDisableAutofill]'
})
export class DiableAutofillDirective implements AfterViewInit {

  constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) { }

  ngAfterViewInit() {
    const randomString = Math.random().toString(36).slice(-6);
    this.renderer.setAttribute(this.el.nativeElement, 'name', randomString);
    this.renderer.setAttribute(this.el.nativeElement, 'autocomplete', randomString);
  }

}

- Marcus

---

这个非常有效！我还添加了一个简单的用户代理检查来检测它是否实际上是Chrome，以便在其他没有这种疯狂自动完成逻辑的浏览器中保持属性不变。 编辑：我是另一个Marcus，不是发布这个答案的那个Marcus... :D - Marcus

如果您通过名称引用表单元素进行验证，则不是很好。 - owlyfool

Answer 4

只需要将您的输入类型从TEXT更改为SEARCH即可。

<input type="search" name="your_address" autocomplete="nope" />

Chrome可以填充文本字段，但在搜索类型上被忽略。

- Oscar Caldeira

Answer 5

Chrome似乎忽略所有实际/干净的尝试来阻止这种情况 - 因此我们需要使用一些hacky方法。我使用了两个蜜罐输入框来防止这种情况发生。它们不能是"display:none"，否则将被跳过。因此，我将它们包装在高度为0且溢出隐藏的div中，并给它们设置了透明度为0（只是为了确保）。你真正的输入框必须放置在蜜罐输入框之后。请参见下文。

<!-- honeypot prevents chrome user autofill bs-->
<div style="height:0; overflow:hidden">
    <input style="opacity:0;" type="email" value="" class="" />
    <input style="opacity:0;" type="password" value=""  class="d-" />
</div>
<!-- end honeypot -->

<!-- ... then put your real inputs after-->
<input type="email" name="email" value="" class="" />
<input type="password" name="password" value=""  class="d-" />
<!-- end honeypot -->

- Mike

---

它适用于电子邮件，但不适用于密码。 - Analyst

Answer 6

我曾遇到类似的问题，使用了谷歌地点自动完成的第三方库ngx-google-places-autocomplete，导致自动填充与谷歌建议地址重叠，无法用任何解决方案解决。 最终通过以下focus事件解决了此问题。

<input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"
      type="text" class="form-control"  id="address1"
        formControlName="address1" placeholder="Street address, P.O. box" required (focus)="setAutoFillOff($event)">

  setAutoFillOff(event: any) {
    if (event) {
      event.target.attributes['autocomplete'].value = 'chrome-off';
    }
  }

我发布这篇文章是为了帮助那些可能处于类似情况的人。

- Vasim

---

这个方法可以用，但我怎样才能在 ngx-google-places-autocomplete 的自动完成中在聚焦前设置 event.target.attributes？ - Ste

Answer 7

禁用自动补全功能

要在表单中禁用自动补全功能，您可以将autocomplete属性设置为“off”： 您可以为整个表单或表单中特定的输入元素执行此操作：

<form [formGroup]="exampleForm" autocomplete="off">
 ...
</form>
// or
<form [formGroup]="exampleForm">
 <div>
  <label >Credit card:</label>
  <input type="text" id="cc" name="cc" autocomplete="off">
 </div>
</form>

禁用登录字段： 许多现代浏览器不支持在登录字段中使用autocomplete="off"：

为了防止密码字段自动填充，您可以使用

autocomplete="new-password"

- Manas

Answer 8

请检查 autocomplete="off webauthn"

在阅读文档https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill后，我提出了这种方法

<input matInput type="password" formControlName="pwd" autocomplete="off webauthn">

- Alex Pro

Answer 9

只需将以下代码添加到表单标签内自动填充的所有HTML输入标记中：

<input type="text" class="form-control" id="inputId"
               name="inputName" autocomplete="new-inputName"  
               [(ngModel)]="model">

注意：如上所示，使用“new-form_element_name”作为自动完成属性。

对我很有效！！！

- Mohammed Altaf

Answer 10

通常我所做的是动态更改输入类型，例如在Angular中：

[type]="(field.length > 0)? 'password' : 'text'"

以此方式，浏览器在第一次单击密码字段时无法识别它并且不会提供建议。但是，如果字段值已经输入一次然后被删除，浏览器将提供建议。（至少第一次不提供建议）。

- Hemant Singh Yadav