使用角形和镀铬禁用自动填充/自动完成

Posted 2023-03-05

【中文标题】使用角形和镀铬禁用自动填充/自动完成

【英文标题】：Disable autofill/autocomplete with angular form and chrome

【发布时间】：2018-06-13 13:32:15

【问题描述】：

我有一个简单的表单，我需要禁用带有角度表单的自动填充/自动完成。

我在 *** 上进行了搜索，但没有找到解决方案。

我使用了 autocomplete="off" 或 autocomplete="false" 但从未禁用自动完成功能。

有时在我加载页面时会暂时禁用自动完成功能。但是，过了一段时间，当我重新加载页面时，问题又出现了。

//上图标记

<input type="text" class="form-control input-lg ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" capitalize-full="" ng-model="user.ENDERECO" required="" placeholder="Digite seu endereço" autocomplete="off" name="street" style="opacity: 1; text-transform: uppercase;">

//标记示例

<form class="form form-horizontal" name="regForm" 
              autocomplete="false" novalidate role="form">
 <input  type="text" class="form-control input-lg"                           
  name="cpf" ng-model="user.CPF" placeholder="Digite seu CPF" 
   required autocomplete="false" >
</form>

【问题讨论】：

我认为 autcomplete="off" 应该可以解决问题。你的页面被缓存了吗？

嗨，不，我总是在测试之前键入 CTRL-F5，并且总是出现带有下拉项目的自动完成功能。查看图片

你在什么浏览器中测试？

嗨，我正在使用 chrome。

有趣。您可以仅在表单上尝试 autocomplete="off" 吗？

【参考方案1】：

我假设该选项仅在输入标签上需要。

<input name="q" type="text" autocomplete="off"/>

【讨论】：

我试过了。它不起作用。有些输入有效，有些则无效。

【参考方案2】：

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

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

我做了一些测试，从我在这里看到的情况来看，当 Chrome 可以将字段名映射到它的自动填充属性之一时，它会忽略 autocomplete="off"。这将工作<input type="text" name="somethingAutofillDoesntKnow" autocomplete="off" />，但对于此字段名称自动填充将显示<input type="text" name="firstName" autocomplete="off" />。

一种解决方法是在自动完成中输入一个未知值，例如自动完成=“doNotAutoComplete”。在测试它时，它大部分时间都对我有用，但后来由于某种原因不再起作用了。

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

【参考方案3】：

2018 年 4 月：在表单本身上设置 autocomplete="off" 对我有用（在 Chrome 上测试）。在单个元素上设置此属性不起作用。

【参考方案4】：

我有同样的问题，对我来说问题是 LastPass。断开连接后一切正常。以及两周的代码重写以找到错误。当然，我在互联网上找到的没有一个适合该解决方案。

我有两个跟踪：使用 Firefox 时我没有遇到问题，并且输入字段修改发生在页面重新加载几毫秒后。

那么是 Chrome 的问题吗？可能是。但是禁用 LastPass 实现了帽子戏法

【参考方案5】：

考虑到 chrome 在凭据/地址/信用卡数据类型的情况下会忽略 autocomplete="off" 属性值，作为一种解决方法，我已使用此指令成功解决了我的问题：

import  Directive, ElementRef, OnInit  from '@angular/core';

@Directive(
  selector: '[autocomplete]'
)
/**
 * Alterates autocomplete="off" atribute on chrome because it's ignoring it in case of credentials, address or credit card data type.
 */
export class AutocompleteDirective implements OnInit 
  private _chrome = navigator.userAgent.indexOf('Chrome') > -1;
  constructor(private _el: ElementRef) 
  ngOnInit() 
    if (this._chrome) 
      if (this._el.nativeElement.getAttribute('autocomplete') === 'off') 
        setTimeout(() => 
          this._el.nativeElement.setAttribute('autocomplete', 'offoff');
        );
      
    
  

【讨论】：

这是唯一对我有用的解决方案，除了我将它添加到 ngAfterViewChecked 而不是 ngOnInit

【参考方案6】：

试试<input autocomplete="off" type="search">它对我有用

【参考方案7】：

在 Angular 中，这个指令对我有用。使用 autocomplete="off" 应该已经解决了这个问题，但似乎 DOM 呈现顺序会阻止这种情况，除非您使用超时。

此外，如果您使用 mat-form-field 之类的内容，并且根据唯一名称生成自动完成功能，您可以在第一个字符之后和最后一个字符之前的任意位置添加 Zero-width non-joiner。

import  Directive, ElementRef, OnInit, Renderer2, AfterViewInit  from '@angular/core'

@Directive(
  selector: '[NoAutocomplete]',
)
export class NoAutocompleteDirective implements AfterViewInit 
  constructor(private renderer: Renderer2, private _el: ElementRef) 
  ngAfterViewInit() 
    setTimeout(() => 
      const inputs = Array.prototype.slice.call(this._el.nativeElement.querySelectorAll('input'))
      inputs.map((e, i) => 
        this.renderer.setAttribute(e, 'autocomplete', 'off')
      )
      // If you're using mat-form-field
      const labels = Array.prototype.slice.call(
        this._el.nativeElement.querySelectorAll('.mat-form-field-label')
      )
      labels.map((l, i) => 
        l.innerHTML = l.innerHTML.replace(
          l.textContent,
          l.textContent.substring(0, 1) + '‌' + l.textContent.substring(1)
        )
      )
    , 0)
  

【参考方案8】：

只需将 autocomplete="new-feildName" 放在 html 控件上

例子：

 <input class="signup-input-field-01" autocomplete="new-phone" 
            formControlName="phone" name="phone" type="text">

【讨论】：

对我来说重要的是，将 autocomplete="new-something" 设置为属于自动完成“捆绑包”的每个字段。例如，设置autocomplete="new-username" 不会阻止填写用户名和密码。只有当我将autocomplete="new-password" 设置为密码输入时，它才起作用。

谢谢，这行得通！请注意，它需要在标签上设置名称属性。所以这将不工作：<input class="signup-input-field-01" autocomplete="new-phone" formControlName="phone" type="text">

【参考方案9】：

这可能有点“笨拙”，但对我来说效果很好。

component.html:

<input type="email"
      ngModel
      name="email"
      required
      #email="ngModel"
      [readonly]="isReadOnly">

component.ts:

  isReadOnly = true;

  ngOnInit() 
    //deal with pesky autocomplete
    setTimeout(() => 
      this.isReadOnly = false;
    , 2000);
  

我是新人，因此非常感谢您的反馈。

【参考方案10】：

多年来我一直在与这个问题作斗争，唯一对我有用的解决方案是使用下面的代码覆盖 FormGroup registerControl() 函数。它基本上是找到输入元素并向其附加一个 guid。

@Component(
 selector: '[fsForm]',
 template: `<ng-content></ng-content>`,
 changeDetection: ChangeDetectionStrategy.OnPush,
)
export class FsFormComponent 

  public ngOnInit() 

    this._registerControl = this.ngForm.form.registerControl.bind(this.ngForm.form);

    this.ngForm.form.registerControl = (name: string, control: AbstractControl) => 

      const el: Element = this._element.nativeElement.querySelector(`input[name='$name']`);

      if (el) 
        el.setAttribute('name', name + '_' + guid());

        if (!el.getAttribute('autocomplete')) 
          el.setAttribute('autocomplete', 'none');
        
      

      return this._registerControl(name, control);
    
  

【参考方案11】：

在 Chrome 上，指定 autocomplete="off" 对我不起作用。但是，autocomplete="disabled" 工作正常。

您可以使用此页面进行测试和评估：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_autocomplete（尝试使用浏览器将关闭更改为禁用）。

祝你好运！

【参考方案12】：

autocomplete="off"/autocomplete="false"/autocomplete="disabled" 对我不起作用。

但是，设置 autocomplete="new-fieldname" 在各个字段中对我有用。但它不适用于表单元素。

Chrome 版本：81.0.4044.122

<input class="form-control" type="text" name="first_name" autocomplete="new-name" required>

【参考方案13】：

我遇到了 autocomplete="false" 不起作用的相同问题，然后我尝试了 autocomplete="off" 但在我的某些客户端系统中 autocomplete="off" 起作用了。但少数用户失败，建议您输入您的输入代码：

 <input autocomplete="nope">

这个条件对我来说很好

【参考方案14】：

autocomplete="off" 单独可能无法完成这项工作。 Chrome 尝试在没有 name 属性的情况下猜测 input 的类型，有时会搞砸。对我有用的技巧是添加一个名称属性。

<mat-form-field>
    <mat-label>Track</mat-label>
    <input name="track" matInput autocomplete="off" [(ngModel)]="track">
</mat-form-field>

希望这可以帮助某人?

【参考方案15】：

我需要为所有 89 个输入执行此操作，因此，我将其插入到我的 html 文件中并为我工作。铬 89.0

<script>
    $("input").each((a,b) => $(b).attr("autocomplete", "new-field-" + 
 Math.random().toString(36).substring(2)))
</script>

【参考方案16】：

对我来说，autocomplete="off" 和更改 name 属性都不是单独起作用的。

但一起（将autocomplete 更改为随机值 - 任何其他网站都未使用的值并将name 属性更改为不同的值）它起作用了。

我猜 Chrome 试图过于聪明，并根据自动完成值和名称值进行猜测。

这是我的工作解决方案的一个示例：

<input matInput formControlName="email" autocomplete="noac" type="email" name="emailnoauto" placeholder="E-Mail" />

这不是很好，但它有效。

【参考方案17】：

autocomplete="off" 不工作你只需要放这样的东西。

<input class="form-control" autocomplete="new-username" 
            formControlName="username" name="username" type="text">

代替：

<input class="form-control" autocomplete="off" 
            formControlName="username" name="username" type="text">

【参考方案18】：

设置名称属性以我的角度材料形式解决了我的问题。 正如 Sanjay Verma 在他的回答 https://***.com/a/66739412/6092524

中解释的那样

<mat-form-field>
<mat-label>Track</mat-label>
<input name="track" matInput autocomplete="off" [(ngModel)]="track">

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案19】：

所有其他解决方案似乎都不适合我。

new-somename 在谷歌工作。但只有以new 开头的最后一个字段受到尊重。 当表单中的多个字段不应显示自动完成时，可以使用此指令。见new-passwordhttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

import  Directive, ElementRef, HostListener  from '@angular/core';

@Directive( selector: 'input[autocompleteOff]' )
export class AutoCompleOffDirective 
  constructor(private el: ElementRef<HTMLInputElement>) 
  @HostListener('focus') _ = () => (this.el.nativeElement.autocomplete = 'new-password');
  @HostListener('blur') _1 = () => (this.el.nativeElement.autocomplete = '');

【参考方案20】：

在我的情况下，对于电子邮件和密码字段，autocomplete="off" [attribute] 没有相应地工作。所以，我使用了autocomplete="new-email" 和autocomplete="new-password" 用于电子邮件和密码字段，这禁用了自动填充。另一方面，在电子邮件和密码字段中使用autocomplete="cc-name" 也可以正常工作。

例如，1：

<input type="email" autocomplete="new-email" formControlName="email" class="form-control" />
<input type="password" autocomplete="new-password" formControlName="password" class="form-control" />

例如，2：

<input type="email" autocomplete="cc-name" formControlName="email" class="form-control" />
<input type="password" autocomplete="cc-name" formControlName="password" class="form-control" />