web-dev-qa-db-ja.com

Chrome 63で自動入力を無効にする

ブラウザをChromeバージョン63.0.3239.84（公式ビルド）（64ビット）に更新しました。

その後、autocomplete='off'の入力ボックスがあるWebサイトに進みましたが、まだ次のメッセージが表示されます。

enter image description here

（その下に私の組み込みの提案ドロップダウンを見ることができます）

これまではそうでなかった。他に何も変わっていません！

なぜこうなった？これは新しいバージョンのChromeのバグですか？ autocomplete="false"やautocomplete = offをフォームに適用するなど、他のすべての提案を試しました。私は、ページが読み込まれた後にjqueryでこれらを適用しようとしましたが、運もありませんでした。

異なるオペレーティングシステム上のchromeの最新バージョンを使用して、複数のマシンでこれをテストしました。問題は解決しません。

htmlgoogle-chrome
50
Cellydy

2018年2月更新：

コメントでこれを指摘してくれた@JamesNisbetに感謝します。

Chromeチーム によると、autocomplete = "off"およびautocomplete = "false"は今後は無視されます。これは、Chromeの一時的な回帰ではありません。

Chromeは オートコンプリートのWHATWG標準 に続くフォームフィールドの自動入力を試みます。 1つの例外を除き、「off」および「false」の値は無視されます。

要約すると、自動入力を無効にするには、WHATWGリストにない値でautocomplete属性を使用します。

このChromiumスレッド のChromeでautocomplete = "off"を無視してはならないと考える理由を説明します。

Chrome 63で可能な回帰のように見えます。Chromeのオリジナルのオートフィルドキュメントでは：

これまで、多くの開発者はフォームフィールドにautocomplete = "off"を追加して、ブラウザが自動補完機能を実行できないようにしていました。 Chromeは引き続きオートコンプリートデータについてこのタグを尊重しますが、オートフィルデータについては尊重しません。それでは、いつautocomplete = "off"を使用すべきですか？ 1つの例は、独自のバージョンの検索用オートコンプリートを実装した場合です。

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

それらは、オートコンプリートとオートフィルを区別していますが、違いは明らかではありません。

Chrome、Safari、およびEdgeはすべてオートフィルの実装を試みていますが、明確な標準はありません。明示的で標準化された属性ではなく、name属性を参照します。

現時点では、autocomplete="something-new"が適切な回避策ですが、構文的には意味がありません。ブラウザが理解できないため、これは機能しているようです。

46
Solvitieg

Autocomplete = "false"とautocomplete = "off"を試しましたが、どちらも動作しません。ただし、autocomplete = "disabled"のようなChromeが理解できないものは動作するようです。奇妙な！

更新：これはChrome 72の時点で機能しています。

25
Erebus

2019autocomplete="disabled"はChrome 72。

コメントを読むことなく、多くの人がダウン投票しているので：これはCHROME 2018年以降は機能しません/ CHROME 63 +関連： https://bugs.chromium.org/p/chromium/issues/detail?id=587466

Autocomplete = "off"の代わりにautocomplete = "false"が機能する場合、Chromeチームの詳細を読むことができます。

ここに：

https://www.chromium.org/developers/design-documents/form-styles-that-c​​hromium-understandshttps://bugs.chromium.org/p/chromium/ issues/detail？id = 46815https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zhhj7hCip5chttps： //developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

14
Brandito

Chromeバージョン65.0.3325.162（公式ビルド）（64ビット）で「ハッキング」が機能するようになりました。

入力フィールドをレンダリングする必要があります-非表示なのでページに影響しません：

<input style="display:none;"/>

次に、パスワード入力フィールドをレンダリングします。

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

したがって、私のフォームは次のようになります。

<form>
    <input style="display:none;" />
    <input type="password" autocomplete="new-password" />
    <input type="submit" />
</form>

重要なのは、パスワードタイプの入力要素に名前またはid属性を追加できないことです。また、autocomplete = "new-password"が必要です。

6
ngrn

Chrome 63の後、autocomplete = "disabled"に変更したようです

ライブラリを検出するブラウザを取得し、残りの部分ではautocomplete = "off"を使用することをお勧めします

4
Detallado

chromeは、入力に最も近い「ラベル」htmlタグを探し、ラベルの値/ htmlを分析して入力の自動入力に影響します。

入力の自動入力を無効にすることがわかった最もクリーンな回避策は次のとおりです。

<label for="">Country</label>
<label for="" style="display: none;">hidden label to mislead chrome autocomplete</label>
<input ... />
3
Tommy

Angularユーザーの場合、autocomplete = 'off'は新しいchromeバージョンで無視されるため、chrome開発者はautocomplete= 'false | random-string'を提案するので、google chrome/modernブラウザには2種類のユーザーヘルパーがあります-

  1. autocomplete = 'off'（最後にキャッシュされた候補を防止します）。
  2. autocomplete = 'false |ランダム文字列」（ブラウザが「ランダム文字列」を知らないため、自動入力設定を防ぎます）。

両方の迷惑な提案を無効にした場合の対処方法ここにトリックがあります：-

すべての入力フィールドにautocomplete = 'off'を追加します。 （または単純なJquery）。

$("input").attr('autocomplete', 'off');

HTMLコードから<form name='form-name'>タグを削除し、ng-form = 'form-name'コンテナに<div>を追加します。 ng-form="form-name"を追加しても、すべての検証が保持されます。

1
Karan Vyas

Chromeが適切に機能しない、および/または心を変え続ける（人間ではないことを知っている）ので、オートフィル/オートコンプリートの停止を保証する最も簡単な解決策は、オートフィルしたくない入力に対して次のことを行うことです：

<input type='text' readonly onfocus="this.removeAttribute('readonly');" value=''/>
1
iamwoor

同じ機能で異なるブラウザが異なるオプションを使用するのは恐ろしいと思います。

クロムの場合は、autocomplete = "disabled"を使用します。これは、オートコンプリートとアドレスベースのオートフィルの両方を処理します（2つの別個のもの）。

element.autocomplete = isGoogleChrome() ? 'disabled' :  'off';

IsGoogleChrome（）の記述方法については、ここから洞察を得ることができます。

JavaScript：ユーザーブラウザーがChromeかどうかを確認する方法

0
Samuel J Mathew

問題のある入力要素を次のように置き換えて、サイトでこれを修正しました

<p class="input" contenteditable="true">&nbsp;</p>

送信前にjQueryを使用して非表示フィールドに入力します。

しかし、これはChromiumでの悪い決断によって必要になった本当にひどいハックです。

0
lufc

JQueryを使用した現在の作業ソリューション：

入力から名前とIDを削除し、自動入力を無効にし、識別クラスを追加しました。次に、必要なフィールド名とIDでhidden入力を作成しました。次に、フォームの送信時に、IDと名前のないフィールド（値を識別クラスで検索）から、名前とIDの隠しフィールドに値をコピーします。

HTML

<form id="myform">
    <input class="identifyingclass" value="">
    <input class="hidden" id="city" name="city" value="">
    <button type="submit">Submit</button>
</form>

Javascript

$('#myform').on('submit', function(e) {
     $("#city").val($('.identifyingclass').val());
});

IDや名前以外に自動入力がラッチされないので、これは機能するはずです。

0
Cellydy

私は通常、自動入力アイコンを非表示にするためにこれを行います：

<div style="width: 0; overflow:hidden;">
    <input type="text" />
</div>

Chromeは最初の書き込み可能なテキストフィールドにオートフィルアイコンを配置するため、アイコンは非表示の入力フィールドに配置されます。

注：入力フィールドを非表示にしたり、表示を「なし」に設定したりしても機能しないようです。

0
Julien Ouimet

入力の「Id」を削除してください。

それは私がそれを修正した方法です。

0
Guillaume Rebmann

autocomplete="off"は、現在のChrome 68およびChrome 63で機能します。

デモ 。

0
Alexander Abakumov