使用角形和鍍鉻禁用自動填充/自動完成

Question

我有一個簡單的表單，我需要使用角度表單禁用自動填充/自動完成。

我在 StackOverflow 上搜索過，但沒有找到解決方案。

我使用過 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>

Answer 1

2018 年 4 月：在表單上設置autocomplete="off"對我有用（在 Chrome 上測試）。 在單個元素上設置此屬性不起作用。

Answer 2

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

例子 ：

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

Answer 3

Chrome 有效地尊重 autocomplete="off"，但您遇到的是 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" /> ，但對於這個 fieldName Autofill 將顯示<input type="text" name="firstName" autocomplete="off" /> .

一種解決方法是在自動完成中放置一個未知值，例如 autocomplete="doNotAutoComplete"。 在測試它時，它大部分時間對我有用，但由於某種原因之后不再起作用。

我的建議是不要反對它並通過正確使用自動完成屬性來利用它的潛力，如下所述： https : //html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

Answer 4

考慮到 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');
        });
      }
    }
  }
}

Answer 5

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

您可以使用此頁面進行測試和評估： https : //www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_autocomplete （嘗試使用瀏覽器將關閉更改為禁用）。

祝你好運！

Answer 6

試試<input autocomplete="off" type="search">它對我有用

Answer 7

我認為該選項僅在輸入標簽上需要。

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

Answer 8

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

Answer 9

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

但是，設置 autocomplete="new-fieldname" 在個別領域對我有用。 但它不適用於表單元素。

鉻版本：81.0.4044.122

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

Answer 10

我有同樣的問題，對我來說問題是LastPass 。 斷開連接后一切正常。 以及兩周的代碼重寫以找到錯誤。 當然，我在互聯網上找到的沒有一個適合解決方案。

我有兩條軌道：使用 Firefox 我沒有遇到問題，並且在頁面重新加載幾毫秒后發生輸入字段修改。

那么是 Chrome 的問題嗎？ 也許。 但是禁用 LastPass 實現了帽子戲法

Answer 11

多年來我一直在與這個問題作斗爭，唯一對我有用的解決方案是使用下面的代碼覆蓋 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);
    }
  }
}

Answer 12

單獨的autocomplete="off"可能無法完成這項工作。 Chrome 嘗試在沒有name屬性的情況下猜測input的類型，有時會搞砸。 對我有用的技巧是添加名稱屬性。

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

希望這對某人有幫助🙏

Answer 13

我需要為我的所有 89 個輸入都這樣做，所以我將它插入到我的 html 文件中並為我工作。 鉻 89.0

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

Answer 14

對我來說， autocomplete="off"和更改name屬性都不是單獨工作的。

但是一起（將autocomplete更改為隨機值 - 任何其他站點都沒有使用並且name屬性不同的值）它起作用了。

我猜 Chrome 正試圖根據自動完成值和名稱值過於聰明和猜測。

這是我的工作解決方案的示例：

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

這不是很好，但它有效。

Answer 15

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

Answer 16

設置名稱屬性解決了我的角度材料形式的問題。 正如 Sanjay Verma 在他的回答中指出的那樣做https://stackoverflow.com/a/66739412/6092524

Answer 17

所有其他解決方案似乎都不適合我。

new-somename在 google 中有效。 但只有最后一個以new開頭的字段才會被尊重。 當表單中的多個字段不應顯示自動完成時，可以使用此指令。 在https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete 中查看new-password

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

Answer 18

就我而言，對於電子郵件和密碼字段， 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" />

Answer 19

我遇到了同樣的問題，其中 autocomplete="false" 不起作用，然后我嘗試了 autocomplete="off" 但在我的一些客戶端系統中 autocomplete="off" 已經工作了。 但少數用戶失敗，我建議你輸入你的輸入代碼：

 <input autocomplete="nope">

這個條件對我來說很好用

Answer 20

這可能“笨拙”，但對我來說效果很好。

組件.html：

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

組件.ts：

  isReadOnly = true;

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

我是新來的，所以非常感謝反饋。