有没有一种方法可以禁用角形字段的Chrome自动填充选项

Question

我尝试使用自动完成false和自动完成关闭。缓存已从字段中删除，但仍然可以看到Chrome自动填充数据。有没有办法禁用角形形式的chrome自动填充选项？任何建议，将不胜感激。谢谢

Answer 1

请检查autocomplete =“ new-password”：

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

它为我工作。在Google文档中找到

Answer 2

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

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

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

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);
  }

}

Answer 4

Chrome有效地尊重了autocomplete =“ off”，但是您正在体验的是Chrome自动填充功能，该功能取代了autocomplete =“ off”：https : //developers.google.com/web/updates/2015/ 06 /自动结帐更快。

过去，许多开发人员会在其表单字段中添加autocomplete =“ off”，以防止浏览器执行任何类型的自动完成功能。尽管Chrome仍然会将此标记用于自动填充数据，但不会将其用于自动填充数据。

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

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

Answer 5

Chrome 似乎忽略了所有阻止这种情况的实际/干净的尝试 - 所以我们需要一点技巧。我使用 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 -->