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

Posted 2023-02-24

【中文标题】有没有办法为角度表单字段禁用 chrome 自动填充选项

【英文标题】：Is there a way to disable chrome autofill option for angular form fields

【发布时间】：2018-09-02 16:52:48

【问题描述】：

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

【问题讨论】：

Disabling Chrome Autofill的可能重复

【参考方案1】：

请检查 autocomplete="new-password":

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

它对我有用。发现于Google documentation

【讨论】：

谢谢！它对我来说非常有效，即使我不喜欢我们在这里使用预先设计的语义：-\

在 Angular 8 中对我有用@Matheno，确切地说是 8.1.3。

在 Angular 11 中工作过！谢谢！

为我工作，谢谢

我在 Angular 12 响应式表单的所有字段中都使用了 autocomplete="no-autocomplete-thanks"，其中一些是我自己管理的 matAutocomplete，工作得非常好，谢谢！

【参考方案2】：

autocomplete="off" 受到 Chrome 的有效尊重，但您遇到的是 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

【讨论】：

谢谢，我试试

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

但是在“自动完成”字段的情况下，它会导致 2 个面板（自动填充 + 标准一个），这太疯狂了。

我设法通过为autocomplete 设置任何无意义的值来禁用 Chrome 上的自动填充。例如autocomplete="no"。我也成功尝试了“no”、“*”、“nope”、“sdjlf”、“！”。这对我来说似乎不合理，但它确实有效。

在某些情况下您“需要与之抗争”，完美的例子是当您是管理员为另一个用户创建用户帐户或人力资源经理入职新员工时，Chrome 坚持干扰所有管理员的地址详细信息等到实际上并不特定于他们的字段中

【参考方案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);
  

【讨论】：

这真的很好用！我还添加了一个简单的用户代理检查来检测它实际上是 Chrome，以便在其他没有 Chrome 使用的这种疯狂的自动完成逻辑的浏览器中保持属性不变。编辑：我是另一个马库斯而不是发布这个答案的马库斯......：D

【参考方案4】：

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

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

Chrome 填充适用于文本字段，但在搜索类型中会被忽略。

【参考方案5】：

我有类似的问题，我无法用任何解决方案解决它，可能是因为我使用第三方来进行 Google 地方自动完成 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';
    
  

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

【讨论】：

这行得通，但是如何在焦点之前设置 ngx-google-places-autocomplete 的自动完成的 event.target.attributes？

【参考方案6】：

Chrome 似乎忽略了所有实际/干净的尝试来阻止这种情况 - 所以我们需要有点 hacky。我使用 2 个蜜罐输入阻止了这种情况。它们不能是“显示：无”，否则它们将被跳过。所以我将它们包裹在一个高度为 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 -->

【参考方案7】：

禁用自动完成

要禁用表单中的自动完成功能，您可以将自动完成属性设置为“关闭”： 您可以对整个表单执行此操作，也可以对表单中的特定输入元素执行此操作：

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

【参考方案8】：

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

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

谷歌浏览器版本 78.0.3904.108

【参考方案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>

【参考方案10】：

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

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

.autocompleteOff
   -webkit-text-security: disc;

<input class='autocompleteOff' type=text>