Question

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

Answer 1

Chrome有效地尊重了autocomplete =“ off”，但是您正在体验的是Chrome的自动填充功能，该功能取代了{auto3 =“ off”：https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill。

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

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

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

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

禁用自动补全

要在表单中禁用自动完成功能，可以将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 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 -->

Answer 6

请检查autocomplete =“ new-password”：

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

对我有用。在Google documentation

中找到

Answer 7

看来autocomplete="off"可以直接在表单标签上使用。当您输入大量文字时很有用

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

Google Chrome版本78.0.3904.108

Answer 8

TLDR;请勿使用明显的名称标记输入内容，否则Chrome会将其选中并自动填充输入内容。

我经常使用form-group类将标签和输入包装在一起，这是非常常见的做法。如此之多，我发现绕过Chrome（角度8，Chrome v80）中的自动填充的唯一方法就是更改输入标签的值。

关闭自动填充：

<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 9

我有类似的问题，我无法使用任何解决方案解决该问题，可能是因为我使用的是Google地方信息自动填充的第三方 ngx-google-places-autocomplete 自动填充重叠的Google建议地址。我能够使用cy.wait("@placeOrder").then((interception) => { console.log(interception); cy.wrap(interception.response.statusCode).should("eq", 200); cy.wrap(interception.request.body.paymentDetails[0].cardNumber).should( "include", "370000000000002" ); cy.wrap( interception.request.body.paymentDetails[0].defaultPayment ).should("eq", false); });事件来解决该问题，如下所示

focus

我将其用于帮助可能处于类似情况的人。

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

9 个答案: