web-dev-qa-db-ja.com

chrome angularフォームフィールドの自動入力オプションを無効にする方法はありますか

Autocomplete falseとauto complete offを使用してみました。キャッシュはフィールドから削除されますが、iamはまだchromeオートフィルデータを表示しています。chromeオートフィルオプションをangular forms？何か提案をいただければ幸いです。

javascriptangulargoogle-chrome
9
Shaik Nizamuddin

Autocomplete = "off"は実質的にChromeによって尊重されますが、経験しているのはChrome autofill機能を引き継ぎ、autocomplete = "off"を無視することです： https：/ /developers.google.com/web/updates/2015/06/checkout-faster-with-autofill 。

これまで、多くの開発者はフォームフィールドにautocomplete = "off"を追加して、ブラウザが自動補完機能を実行できないようにしていました。 Chromeは引き続きオートコンプリートデータに対してこのタグを尊重しますが、オートフィルデータに対してはこのタグを尊重しません。

回避策の1つは、オートコンプリートに不明な値を入力することです。 <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />。これをテストするとき、それはほとんどの時間私のために働いたが、何らかの理由でその後はもう機能しませんでした。

ここで説明されているように、オートコンプリート属性を適切に使用することにより、それと戦わずにその可能性を活用することをお勧めします。 https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

6
Ayoub k

Autocomplete = "new-password"を確認してください：

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

それは私のために働いた。 Googleドキュメント にあります

10
Panos

入力をTEXTタイプからSEARCHタイプに変更するだけです。

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

Chromeの塗りつぶしはテキストフィールドで機能しますが、検索タイプでは無視されます。

4
Oscar Caldeira

試行錯誤の結果、入力名とオートコンプリートの属性をランダムな文字列に設定すると、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);
  }

}
1
Marcus

Chromeはこれを阻止するための実用的でクリーンな試みをすべて無視しているようです。そのため、少しハックする必要があります。 2つのハニーポット入力を使用してこれを防止しました。 「display：none」にすることはできません。そうしないとスキップされます。そこで、私はそれらをheight：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 -->
0
Mike