有没有办法为 angular 表单字段禁用 chrome 自动填充选项

Question

我试过使用 autocomplete false 和 auto complete off。 缓存已从字段中删除，但我仍然看到 chrome 自动填充数据。 有没有办法在 angular forms 中禁用 chrome 自动填充选项？ 任何建议，将不胜感激。 谢谢

Answer 1

请检查自动完成=“新密码”：

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

它对我有用。 在谷歌文档中找到

Answer 2

Chrome 有效地尊重 autocomplete="off"，但您遇到的是 Chrome 自动填充功能接管，忽略 autocomplete="off"： https : //developers.google.com/web/updates/2015/ 06/checkout-faster-with-autofill 。

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

一种解决方法是在自动完成中放置一个未知值，例如<input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" /> 。 在测试它时，它大部分时间对我有用，但由于某种原因之后不再起作用。

我的建议是不要反对它并通过正确使用自动完成属性来利用它的潜力，如下所述： https : //html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

Answer 3

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

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

Chrome 填充文本字段，但它在搜索类型中被忽略。

Answer 4

通过一些反复试验，似乎如果您将输入名称和自动完成属性设置为随机字符串，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);
  }

}

Answer 5

Chrome 似乎忽略了阻止这种情况的所有实际/干净的尝试 - 所以我们需要有点hacky。 我使用 2 个蜜罐输入阻止了这种情况。 它们不能是“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 -->

Answer 6

我遇到了类似的问题，我无法使用任何解决方案解决它，可能是因为我使用第三方进行 Google 地点 Autocomplete ngx-google-places-autocomplete其中自动填充与 google 建议地址重叠。 我能够使用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';
    }
  }

我提出这个是为了帮助可能处于类似情况的人。

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"

Answer 8

似乎autocomplete="off"可以直接在表单标签上使用。 当你有很多文本输入时很有用

<form [formGroup]="vmForm" autocomplete="off">

• 谷歌浏览器版本 78.0.3904.108

Answer 9

TLDR； 不要用明显的名称标记您的输入，否则 Chrome 会选择并自动填充输入。

我经常使用form-group类将我的标签和输入包装在一起，这是很常见的做法。 因此，我发现在 Chrome（Angular 8，Chrome v80）中绕过 AutoFill 的唯一方法是更改​​输入标签的值。

关闭自动填充：

<div class="form-group">
  <label for="aRandomPlace" class="form-group-label">Pickup Location</label>
  <input type="text" name="aRandomPlace" [(ngModel)]="data.address" class="form-group-input">
</div>

不关闭自动填充：

<div class="form-group">
 <label for="address" class="form-group-label">Pickup Address</label>
 <input type="text" name="address" [(ngModel)]="data.address" class="form-group-input">
</div>

Answer 10

我相信我们正在讨论禁用“自动建议”而不是“自动完成”“自动完成=关闭”适用于文本类型输入字段，但如果是密码类型，浏览器会忽略它。 有很多建议可以使用“Autocomplete='chrome-off', 'new-password'”，但这些并不意味着禁用自动建议。

对于这些，我更喜欢屏蔽技术来屏蔽内容。

 .autocompleteOff{ -webkit-text-security: disc; }

 <input class='autocompleteOff' type=text>

Answer 11

只需将所有 HTML 输入标签添加到表单标签中，如下所示：

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

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

它对我有用！！！

Answer 12

我在文档中找到了答案，它就像一个魅力。 您可以在此处找到更多相关信息。

 <input type="text" autocomplete="off" name="one-time-code" id="one-time-code">

Answer 13

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

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

这样，第一次点击时浏览器无法识别密码字段，不会提供提示。 但是，如果该字段值曾经输入过一次又被擦除，浏览器会给出提示。 （至少它不是第一次提供建议）。

Answer 14

我用生命周期钩子ngAfterViewChecked()重置了整个表单组。 在检查所有视图和子视图后触发此生命周期。

放入组件：

   ngAfterViewChecked(){
    this.myFormGroup.reset()
  }