いくつかのフォームでChromeの自動入力動作に関する問題が発生しています。

フォームのすべてのフィールドには、「メール」、「名前」、「パスワード」などの非常に一般的で正確な名前があり、それらもautocomplete="off"設定されています。

オートコンプリートフラグにより​​、オートコンプリートの動作が正常に無効になりました。入力を開始すると値のドロップダウンが表示されますが、Chromeがフィールドに自動入力する値は変更されていません。

この動作は問題ありませんが、Chromeが入力を誤って入力している場合を除きます。たとえば、電話の入力に電子メールアドレスを入力します。顧客はこれについて不満を言っているので、それが複数のケースで発生していることが確認されており、自分のマシンでローカルに実行した何かに対する何らかの結果ではありません。

私が考えることができる現在の唯一の解決策は、カスタム入力名を動的に生成してからバックエンドで値を抽出することですが、これはこの問題を回避するかなりハックな方法のようです。これを修正するために使用できる自動入力の動作を変更するタグや癖がありますか？

新しいChromeバージョンの場合はautocomplete="new-password"、パスワードフィールドに入力するだけで済みます。私はそれをチェックしました、うまく働きます。

このディスカッションでChrome開発者からヒントを得ました：https : //bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

PS Chromeは、ラベルや任意のテキストノードなど、フィールドを囲むことができる名前、ID、およびテキストコンテンツから自動入力動作を推測しようとすることに注意してください。street-addressコンテキスト内のようなオートコンプリートトークンがある場合、Chromeはそのように自動入力します。ヒューリスティックは、フォームに追加のフィールドがある場合にのみトリガーされる場合や、フォームにフィールドが少なすぎる場合にトリガーされない場合があるため、非常に混乱する可能性があります。また、これautocomplete="no"は機能するように見えますがautocomplete="off"、歴史的な理由で機能しないことに注意してください。autocomplete="no"このフィールドはと呼ばれるフィールドとして自動入力する必要があることをブラウザに伝えています"no"。一意のランダムなautocomplete名前を生成する場合は、オートコンプリートを無効にします。

ユーザーが不正なフォームにアクセスした場合、自動入力情報が破損している可能性があります。手動で行ってChromeでオートフィル情報を修正するように依頼することは、彼らからの必要なアクションとなる場合があります。

私はちょうどあなたがサイトに覚えのユーザ名とパスワードを持っている場合は、クロームの現在のバージョンはにあなたのユーザー名/メールアドレスを自動入力することを発見した前フィールドの任意type=passwordのフィールド。フィールドが何と呼ばれるかは関係ありません-パスワードがユーザー名になる前のフィールドを想定しているだけです。

古いソリューション

使用するだけで<form autocomplete="off">、パスワードの事前入力や、ブラウザーが行う可能性のある仮定（多くの場合、間違っている）に基づくフィールドのヒューリスティックな入力が防止されます。<input autocomplete="off">パスワードの自動入力ではほとんど無視されているように見えるとは対照的に（Chromeでは、Firefoxはそれに従います）。

更新されたソリューション

Chromeはを無視するようになりました<form autocomplete="off">。したがって、（私が削除していた）私の最初の回避策は今や大流行しています。

いくつかのフィールドを作成し、「display：none」で非表示にするだけです。例：

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

次に、実際のフィールドを下に置きます。

コメントを追加することを忘れないでください。そうしないと、チームの他の人があなたが何をしているのか不思議に思うでしょう。

2016年3月の更新

最新のChromeでテストしたところ、すべて良好です。これはかなり古い回答ですが、私たちのチームがこれまで何十ものプロジェクトで何年も使ってきたことを述べておきたいと思います。以下のいくつかのコメントにもかかわらず、それはまだうまくいきます。フィールドはdisplay:noneフォーカスされないことを意味しているため、アクセシビリティに問題はありません。私が述べたように、あなたはあなたの本当のフィールドの前にそれらを置く必要があります。

JavaScriptを使用してフォームを変更している場合は、追加のトリックが必要になります。フォームの操作中に偽のフィールドを表示し、ミリ秒後に再び非表示にします。

jQueryを使用したコードの例（偽のフィールドにクラスを指定した場合）：

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

2018年7月の更新

Chromeの使いやすさの専門家が一生懸命働いているため、私のソリューションはうまく機能しなくなりました。しかし、彼らは私たちに骨を投げました：

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

これは機能し、主に問題を解決します。

ただし、パスワードフィールドがなく、電子メールアドレスしかない場合は機能しません。また、黄色になり、プレフィルするのをやめるのが難しい場合もあります。偽のフィールドソリューションを使用してこれを修正できます。

実際、2つのたくさんの偽のフィールドに立ち寄って、別の場所で試す必要がある場合があります。たとえば、フォームの最初にすでに偽のフィールドがありましたが、Chromeは最近「電子メール」フィールドに再度事前入力を開始しました。そのため、ダブルダウンして、「電子メール」フィールドの直前に偽のフィールドを追加し、それを修正しました。フィールドの最初または2番目のロットを削除すると、誤った熱狂的な自動入力に戻ります。

2020年3月の更新

このソリューションがまだ機能するかどうか、いつ機能するかは明らかではありません。それは時々まだ機能するように見えますが、常にではありません。

以下のコメントにいくつかのヒントがあります。@anilyeniによって追加されたものは、さらに調査する価値があります。

気づいたように、にautocomplete="off"含まれる要素が3つ未満の場合、Chrome 80 で動作し<form>ます。ロジックとは何か、それに関する関連ドキュメントはどこにあるのかわかりません。

また、私はテストしていませんが、@ dubroxからのこれは関連があるかもしれません：

トリックに感謝しますが、display:none;もううまくいかないので答えを更新してくださいposition: fixed;top:-100px;left:-100px; width:5px;:)

2020年4月の更新

この属性のクロムの特別な値は仕事をしています：（入力でテストされました-私ではありません） autocomplete="chrome-off"

何カ月も何カ月も苦労した結果、このソリューションは想像以上に簡単であることがわかりました。

代わりのautocomplete="off"使用autocomplete="false";）

とてもシンプルで、Google Chromeでも同様に機能します。

2019年8月の更新（コメントで@JonEdigerへのクレジット）

注：オンラインの多くの情報によると、ブラウザーはautocomplete = 'false'をautocomplete = 'off'と同じものとして扱うようになりました。少なくとも現時点では、これらの3つのブラウザのオートコンプリートを妨げています。

フォームレベルで設定し、必要な入力に対して、 'none'などの無効な値に設定します。

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

時々さえ autocomplete=offは、資格情報を間違ったフィールドに入力する妨げられません。

回避策は、読み取り専用モードを使用してブラウザーの自動入力を無効にし、フォーカスに書き込み可能を設定することです。

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

の focusイベントは、マウスのクリックで発生し、フィールドをタブ移動します。

更新：

Mobile Safariはフィールドにカーソルを設定しますが、仮想キーボードを表示しません。この新しい回避策は以前と同じように機能しますが、仮想キーボードを処理します。

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

ライブデモ https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

説明：ブラウザーが資格情報を誤ったテキストフィールドに自動入力しますか？

入力を誤って入力する。たとえば、電話入力に電子メールアドレスを入力する

同じフォームにパスワードフィールドがある場合、ChromeとSafariでこの奇妙な動作が発生することがあります。たぶん、ブラウザは保存された認証情報を挿入するためのパスワードフィールドを探します。そして、それが自動入力ユーザー名を前にパスワードフィールドを表示さ最寄りtextlike、入力フィールドの中に（ちょうど観測による推測）DOMに。ブラウザは最後のインスタンスであり、制御できないため、

上記のこの読み取り専用の修正は私にとってはうまくいきました。

検索ボックス機能を実装している場合は、type属性をsearch、次のように。

<input type="search" autocomplete="off" />

これは私にとってChrome v48で動作し、正当なマークアップのようです：

https://www.w3.org/wiki/HTML/Elements/input/search

これを試して。質問が少し古いことは知っていますが、これは問題に対する別のアプローチです。

また、問題がpasswordフィールドのすぐ上にあることに気づきました。

私は両方の方法を試しました

<form autocomplete="off">そして<input autocomplete="off">、どれも私のために働いていませんでした。

そこで、以下のスニペットを使用して修正しましたdisplay:none。パスワードタイプフィールドのすぐ上に別のテキストフィールドを追加して作成しました。

このようなもの：

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

それが誰かを助けることを願っています。

理由はわかりませんが、これが役立ちました。

<input type="password" name="pwd" autocomplete="new-password">

理由はわかりませんが、autocompelete = "new-password"は自動入力を無効にします。最新の49.0.2623.112 Chromeバージョンで動作しました。

私にとっては、単純な

<form autocomplete="off" role="presentation">

それをやった。

複数のバージョンでテストされ、最後の試行は56.0.2924.87でした

この属性を追加する必要があります：

autocomplete="new-password"

ソースリンク：記事全文

それはとてもシンプルでトリッキーです:)

クロムは基本的に検索googleのすべての最初に表示されるパスワード要素の内側<form>、<body>そして<iframe>あなたは、次のようにダミーのパスワード要素を追加する必要があり、これを無効にするので、彼らのために自動補充を可能にするタグ：

1. • <form>タグ内のパスワード要素の場合、ダミータグをフォームの最初の要素として、<form>開いているタグの直後に配置する必要があります。

   • <form>タグ要素内にないパスワード要素の場合、ダミー要素を、<body>タグを開く直後のHTMLページの最初の要素として配置します。

2. cssを使用せずにダミー要素を非表示にする必要があるため、display:none基本的には以下をダミーのパスワード要素として使用します。

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>

Googleは人々が行うと思われるすべての回避策をオーバーライドすることを主張しているので、ここに私の提案するソリューションがあります。

オプション1-クリックですべてのテキストを選択する

入力の値をユーザーの例（例：）your@email.comまたはフィールドのラベル（例Email：）に設定し、呼び出さfocus-selectれたクラスを入力に追加します。

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

そして、jQueryは次のとおりです。

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

Chromeが値をいじるのを見ることは本当にできません。それはクレイジーになるでしょう。うまくいけば、これは安全な解決策です。

オプション2-メールの値をスペースに設定してから削除する

電子メールとパスワードなどの2つの入力があると仮定して、電子メールフィールドの値を" "（スペース）に設定し、属性/値を追加して、autocomplete="off"JavaScriptでこれをクリアします。パスワード値は空のままにできます。

ユーザーがなんらかの理由でJavaScriptを使用していない場合は、ユーザーがスペースを削除しない場合に備えて、サーバー側の入力をトリミングしてください（とにかくそうする必要があります）。

jQueryは次のとおりです。

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

私のテストではたまに機能するように見えた15ので、タイムアウトをに設定しました5。

初期値をスペースに設定しないと、Chromeは入力を自動入力したかのように黄色のままにします。

オプション3-非表示の入力

これをフォームの最初に置きます：

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS：

.hide{ display:none; }

他の開発者が削除しないように、HTMLノートを保管してください。また、非表示の入力の名前が適切であることを確認してください。

css text-securityを使用：type = passwordを使用しないディスク。

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

CSS

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}

場合によっては、autocomplete属性がオフに設定されていても、ブラウザーはオートコンプリート値を提案し続けることがあります。この予期しない動作は、開発者にとって非常に不可解です。オートコンプリートを強制的に実行するコツは、属性にランダムな文字列を割り当てることです。次に例を示します。

autocomplete="nope"

これをフォームに追加すると、Chromeで自動入力を使用できなくなることがわかりました。

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

ここで見つかりました。https://code.google.com/p/chromium/issues/detail?id=468153#hc41

Chromeがオートコンプリートのタイミングについてデベロッパーよりもよく知っていると判断したことに本当にがっかりしました。それに本物のマイクロソフトの感触がある。

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

onfocusイベントと共にタグにreadonly属性を追加すると、タグが削除されて問題が修正されます

ユーザー名とパスワードの組み合わせの場合、これは簡単に解決できる問題です。Chromeヒューリスティックは次のパターンを探します。

<input type="text">

に続く：

<input type="password">

これを無効にして、このプロセスを単に中断します。

<input type="text">
<input type="text" onfocus="this.type='password'">

Mike Nelsons提供のソリューションは、Chrome 50.0.2661.102 mでは動作しませんでした。display：noneを設定して同じタイプのinput要素を追加するだけで、ネイティブブラウザーのオートコンプリートが無効になることはなくなりました。オートコンプリートを無効にしたい入力フィールドの名前属性を複製する必要があります。

また、フォーム要素内にあるときに入力フィールドが重複しないようにするには、表示されていない要素に無効を配置する必要があります。これにより、その要素がフォームアクションの一部として送信されなくなります。

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

2016年、Google Chrome autocomplete=offはW3Cにありますが無視し始めました。彼らが投稿した答え：

ここでのトリッキーな部分は、Webの途中でautocomplete = offが多くのフォームフィールドのデフォルトになることです。ユーザーにとってそれが良いかどうかについてはまったく考えていません。これは、ブラウザーの自動入力データ（たとえば、CRMシステム）が不要なケースがそれほど有効ではないという意味ではありませんが、概して、それらを少数派ケースと見なします。その結果、Chrome Autofillデータのautocomplete = offを無視し始めました。

つまり、ユーザーが何を望んでいるかがよくわかります。

autocomplete = offが必要な場合に有効なユースケースを投稿するために別のバグをオープンしました

すべてのB2Bアプリケーション全体でオートコンプリートに関連する問題は見たことがありませんが、パスワードタイプの入力のみで問題が発生しました。

画面にパスワードフィールドがある場合でも、非表示のパスワードフィールドであっても、自動入力が機能します。このロジックを解除するには、独自のページロジックを解除しない場合、各パスワードフィールドを独自のフォームに配置します。

<input type=name >

<form>
    <input type=password >
</form>

プレースホルダーの保持に問題があり、Chromeの自動入力を無効にしている場合、この回避策を見つけました。

問題

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

上記の例でも自動入力の問題が発生しrequired="required"ますが、CSSといくつかのCSSを使用すると、プレースホルダーを複製でき、Chromeはタグを取得しません。

解決

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

私は本当に隠しフィールドを作るのは好きではありませんでした。そのようにすると本当に混乱しやすくなります。

オートコンプリートを停止する入力フィールドでは、これが機能します。フィールドを読み取り専用にし、フォーカス上でこのようにその属性を削除します

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

これは、最初にフィールドを選択して読み取り専用属性を削除する必要があることを意味します。その時点で、ほとんどの場合、独自のユーザー入力を入力し、自動入力を無効にして引き継ぎます

以前に入力されたクロムでキャッシュされた値は、ドロップダウン選択リストとして表示されます。これはautocomplete = offで無効にできます。クロムの詳細設定で明示的に保存されたアドレスは、アドレスフィールドがフォーカスを取得したときにオートフィルポップアップを表示します。これはautocomplete = "false"で無効にできます。しかし、それはクロムがドロップダウンにキャッシュされた値を表示することを可能にします。

入力htmlフィールドで、次は両方をオフにします。

Role="presentation" & autocomplete="off"

アドレスの自動入力の入力フィールドを選択している間、Chromeは、ラベルhtml要素の前にない入力フィールドを無視します。

Chromeパーサーが自動入力アドレスポップアップの入力フィールドを無視するようにするには、ラベルとテキストボックスの間に非表示のボタンまたは画像コントロールを追加できます。これにより、自動入力のためのラベルと入力のペア作成のChrome解析シーケンスが中断されます。住所フィールドの解析中、チェックボックスは無視されます

Chromeでは、label要素の「for」属性も考慮されます。クロムの解析シーケンスを中断するために使用できます。

まあ、私たち全員がこの問題を抱えているので、私はこの問題のために機能するjQuery拡張機能を書くために少し時間を費やしました。GoogleはGoogleをフォローするのではなく、HTMLマークアップをフォローする必要があります

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

これを/js/jquery.extends.jsのようなファイルに追加するだけです jQueryを過ぎて含め。次のように、ドキュメントのロード時にそれを各フォーム要素に適用します。

$(function() {
    $('form').autoCompleteFix();
});

jsfiddleとテスト

jQuery私のために働いた次のコードを試してください。

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

これには2つの要素があります。Chromeや他のブラウザは、以前に入力されたフィールド名の値を記憶し、それに基づいてユーザーにオートコンプリートリストを提供します（特に、明らかな理由により、パスワードタイプの入力はこの方法では決して記憶されません）。autocomplete="off"メールフィールドなどでこれを防ぐために追加できます。

ただし、その場合はパスワードフィラーがあります。ほとんどのブラウザには独自の組み込み実装があり、この機能を提供するサードパーティのユーティリティも多数あります。これ、止められない。これは、後で自動的に入力されるようにこの情報を保存することを自分で選択するユーザーであり、アプリケーションの影響範囲および影響範囲から完全に外れています。

あたりとしてクロムバグ報告＃352347クロームもはや点autocomplete="off|false|anythingelse"、どちらの形式でも入力に。

私のために働いた唯一の解決策は、ダミーのパスワードフィールドを追加することでした：

<input type="password" class="hidden" />
<input type="password" />

ここで機能するように設定autocompleteすることでoff、Googleが検索ページで使用する例があります。inspect要素からこれを見つけました。

編集：off動作しない場合は、falseまたはを試してくださいnofill。私の場合、それはクロムバージョン48.0で動作しています

ここに汚いハックがあります-

ここに要素があります（disabled属性を追加）：

<input type="text" name="test" id="test" disabled="disabled" />

次に、Webページの下部にJavaScriptを配置します。

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

異なるソリューション、Webkitベース。すでに述べたように、Chromeはパスワードフィールドを見つけると、メールをオートコンプリートします。AFAIK、これはautocomplete = [whatever]に関係ありません。

これを回避するには、入力タイプをテキストに変更し、Webkitセキュリティフォントを任意の形式で適用します。

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

これからわか​​るように、これは少なくともinput type = passwordと同じくらい安全であり、コピーアンドペーストで安全です。ただし、アスタリスクを削除するスタイルを削除することで脆弱です。もちろん、入力タイプ=パスワードをコンソールで簡単に入力タイプ=テキストに変更して、自動入力されたパスワードを表示できるため、実際にはほとんど同じです。

私のために働く唯一の方法は：（jQueryが必要です）

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

私は同じ問題に直面しました。そして、これがChromeの自動入力ユーザー名とパスワードを無効にするための解決策です（Chromeでのみテストされています）

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">