タグボックスのドロップダウンを使用するWebアプリケーションを作成しました。これは、Chromeブラウザー（バージョン21.0.1180.89）を除くすべてのブラウザーで正常に動作します。
フィールドと属性を持つinputフィールドの両方にもかかわらず、Chromeは、フィールドの以前のエントリのドロップダウン履歴を表示することを要求します。これにより、タグボックスリストが消去されます。formautocomplete="off"
回答:
更新
Chromeはstyle="display: none;"or style="visibility: hidden;属性を無視しているようです。
次のように変更できます。
<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">
私の経験では、Chromeは最初<input type="password">と前ののみをオートコンプリートし<input>ます。だから私は追加しました：
<input style="display:none">
<input type="password" style="display:none">
の上に、<form>ケースが解決しました。
display: none;要素は消えますが、オートコンプリートについては何も起こりません。
ユーザー名（または電子メール）とパスワードのオートコンプリートを防止します。
<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">
フィールドのオートコンプリートを防ぐ（機能しない可能性があります）：
<input type="text" name="field" autocomplete="nope">説明：
autocompleteは<input>持っていても引き続き機能しautocomplete="off"ますがoff、などのランダムな文字列に変更できますnope。
フィールドのオートコンプリートを無効にするための他の「解決策」（それを行う正しい方法ではありませんが、機能します）：
1。
HTML：
<input type="password" id="some_id" autocomplete="new-password">JS（オンロード）：
(function() {
var some_id = document.getElementById('some_id');
some_id.type = 'text';
some_id.removeAttribute('autocomplete');
})();
またはjQueryを使用：
$(document).ready(function() {
var some_id = $('#some_id');
some_id.prop('type', 'text');
some_id.removeAttr('autocomplete');
});
2。
HTML：
<form id="form"></form>JS（オンロード）：
(function() {
var input = document.createElement('INPUT');
input.type = 'text';
document.getElementById('form').appendChild(input);
})();
またはjQueryを使用：
$(document).ready(function() {
$('<input>', {
type: 'text'
}).appendTo($('#form'));
});
jQueryを使用して複数のフィールドを追加するには：
function addField(label) {
var div = $('<div>');
var input = $('<input>', {
type: 'text'
});
if(label) {
var label = $('<label>', {
text: label
});
label.append(input);
div.append(label);
} else {
div.append(input);
}
div.appendTo($('#form'));
}
$(document).ready(function() {
addField();
addField('Field 1: ');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>で動作します：
Chrome：49以上
Firefox：44以上
new-password実際にはパスワードではないすべての非表示の入力の良いキャッチです、ありがとう
autocomplete="nope"両方のフォームフィールドに追加しない限り、Lolは実際に機能しました。どちらのフィールドにも設定できるので、そのフィールドはオートコンプリートされませんが、他のフィールドはオートコンプリートのままですが、両方のフィールドに配置するとすぐに、両方が再びオートコンプリートを開始します。
タグautocomplete="off"上にない限り、Chromeは無視するようになりました<form autocomplete="off">。
入力readonlyを行い、焦点を合わせて削除します。これは非常に単純なアプローチであり、ブラウザーはreadonly入力を取り込みません。したがって、このメソッドは受け入れられ、将来のブラウザの更新によって上書きされることはありません。
<input type="text" onfocus="this.removeAttribute('readonly');" readonly />次の部分はオプションです。入力のスタイルに合わせて、readonly入力のように見えないようにします。
input[readonly] {
cursor: text;
background-color: #fff;
}modern approachです。Javascriptがオフになっているのは、世界中のユーザーの1％未満です。正直なところ、大多数のWebサイトがJavascriptに依存している場合、そのような小さなオーディエンスに対応することは誰にとっても価値がありません。現在、非常に長い間Webサイトを開発しており、私のサイトの100％はJavaScriptを使用しており、Javascriptに大きく依存しています。ユーザーがJavaScriptをオフにしている場合、それは私の問題であり、私の選択ではありません。無効にすると、オンラインのWebサイトの少なくとも90％にアクセスしたり使用したりできなくなります...反対票はまったく関係ありません。
信頼できる回避策として、このコードをレイアウトページに追加できます。
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete"
name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>Chromeは、フォームに他のオートコンプリート値を持つ少なくとも1つの他の入力要素がある場合にのみautocomplete = offを尊重します。
これはパスワードフィールドでは機能しません。これらのフィールドは、Chromeではまったく異なる方法で処理されます。詳細については、https：//code.google.com/p/chromium/issues/detail？id = 468153を参照してください。
更新：2016年3月11日、Chromiumチームによってバグが「修正されない」としてクローズされました。完全な説明については、最初に提出したバグレポートの最後のコメントを参照してください。TL; DR：autocomplete = "new-street-address"などのセマンティックオートコンプリート属性を使用して、Chromeがオートフィルを実行しないようにします。
さて、パーティーには少し遅れましたが、どうやって機能autocompleteすべきか、機能すべきでないかについて、少し誤解があるようです。HTML仕様によれば、ユーザーエージェント（この場合はChrome）は次のものをオーバーライドできますautocomplete。
https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute
ユーザーエージェントは、ユーザーが要素の自動入力フィールド名を上書きすることを許可する場合があります。たとえば、「オフ」から「オン」に変更して、ページの作成者の異議にもかかわらず値を記憶して事前入力できるようにしたり、常に「オフ」にして記憶しないようにしたりできます。値。ただし、ユーザーエージェントは、サイトの設定に関係なくすべての値が常に記憶される場合、ユーザーに重大なセキュリティ上の影響があるため、ユーザーが自動入力フィールド名を「オフ」から「オン」またはその他の値に簡単に上書きすることを許可しないでください。
したがって、Chromeの場合、開発者は基本的に「これをユーザーに任せて、autocomplete作業するかどうかをプリファレンスで決定します。それが必要ない場合は、ブラウザーで有効にしないでください」 。
しかし、これは私の好みでは少し熱心すぎるようですが、それは現状です。この仕様では、このような移動の潜在的なセキュリティへの影響についても説明しています。
「off」キーワードは、コントロールの入力データが特に機密であることを示します（たとえば、核兵器のアクティベーションコード）。または、それが再利用されることのない値（銀行ログインのワンタイムキーなど）であり、ユーザーがUAに依存して事前入力する代わりに、毎回明示的にデータを入力する必要があること彼にとっての価値 または、ドキュメントが独自のオートコンプリートメカニズムを提供し、ユーザーエージェントがオートコンプリート値を提供することを望まないこと。
だから、他の皆と同じフラストレーションを経験した後、私は私のために働く解決策を見つけました。それはautocomplete="false"答えに似ています。
Mozillaの記事は、まさにこの問題について述べています。
場合によっては、autocomplete属性がオフに設定されていても、ブラウザがオートコンプリート値を提案し続けることがあります。この予期しない動作は、開発者にとって非常に不可解です。完全に強制しないための秘訣は、属性にランダムな文字列を割り当てることです
したがって、次のコードは機能するはずです。
autocomplete="nope"また、以下のそれぞれについても同様です。
autocomplete="false"
autocomplete="foo"
autocomplete="bar"私が目にする問題は、ブラウザエージェントがautocomplete属性を学習し、次にフォームを表示するときにそれを適用するのに十分賢いということです。これを行う場合、問題を回避する唯一の方法autocompleteは、ページの生成時に属性値を動的に変更することです。
言及する価値のある点の1つは、多くのブラウザがautocompleteログインフィールド（ユーザー名とパスワード）の設定を無視することです。Mozillaの記事にあるように：
このため、最近のブラウザの多くは、ログインフィールドのautocomplete = "off"をサポートしていません。
- サイトがフォームにautocomplete = "off"を設定し、フォームにユーザー名とパスワードの入力フィールドが含まれている場合でも、ブラウザーはこのログインを記憶することを提案し、ユーザーが同意すると、ブラウザーは次にこれらのフィールドを自動入力しますユーザーがこのページにアクセスします。
- サイトがユーザー名とパスワードの入力フィールドにautocomplete = "off"を設定している場合でも、ブラウザはこのログインを記憶することを提案し、ユーザーが同意すると、ユーザーが次にこのページにアクセスしたときにブラウザはそれらのフィールドを自動入力します。
これは、Firefox（バージョン38以降）、Google Chrome（34以降）、およびInternet Explorer（バージョン11以降）での動作です。
最後に、属性がform要素に属しているか要素に属しているかについての小さな情報input。仕様には答えがあります：
autocomplete属性を省略した場合は、代わりに要素のフォーム所有者のautocomplete属性の状態に対応するデフォルト値が使用されます（ "on"または "off"）。フォームの所有者がいない場合は、値「on」が使用されます。
そう。フォームに入力すると、すべての入力フィールドに適用されます。個々の要素に配置することは、その要素だけに適用する必要があります（フォームに要素がない場合でも）。autocompleteがまったく設定されていない場合、デフォルトでになりonます。
概要
autocompleteフォーム全体で無効にするには：
<form autocomplete="off" ...>または、動的に行う必要がある場合：
<form autocomplete="random-string" ...>autocomplete個々の要素を無効にするには（フォームの設定の有無に関係なく）
<input autocomplete="off" ...>または、動的に行う必要がある場合：
<input autocomplete="random-string" ...>また、特定のユーザーエージェントは、無効にしようとする最も困難な試みでさえもオーバーライドできることを覚えておいてくださいautocomplete。
現在の解決策はを使用することtype="search"です。Googleは、検索タイプの入力に自動入力を適用しません。
参照：https : //twitter.com/Paul_Kinlan/status/596613148985171968
アップデート2016/04/04：これは修正されたようです！http://codereview.chromium.org/1473733008を参照してください
クロームバージョン34は今無視しautocomplete=off、
これを参照してください。
ブラウザはautocomplete = off autoを気にしないか、資格情報を間違ったテキストフィールドに入力しますか？
ユーザーがクリックするか、このフィールドにタブキーを使用したときに、パスワードフィールドを読み取り専用に設定してアクティブ化することで、問題を修正しました。
ブラウザの自動入力を修正：読み取り専用にして、フォーカスを書き込み可能に設定します（マウスクリックでフィールドをタブで移動）
<input type="password" readonly
onfocus="$(this).removeAttr('readonly');"/>更新：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に。ブラウザは最後のインスタンスであり、それを制御できないため、autocomplete = offでも、ユーザーまたはニックネームのフィールドではなく、資格情報を間違ったフィールドに入力することを妨げない場合があります。
TL; DR：これは新しいパスワード入力であり、オートコンプリートの候補として古いパスワードを提供しないことをChromeに伝えます。
<input type="password" name="password" autocomplete="new-password">autocomplete="off" は設計上の決定が原因で機能しません-多くの調査によると、ユーザーがブラウザーまたはパスワードマネージャーにパスワードを保存できる場合、パスワードをハッキングするのは非常に長く困難です。
の仕様autocomplete が変更され、ログインフォームの自動入力を容易にするためにさまざまな値がサポートされるようになりました。
<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">
<!-- current-password will populate for the matched username input -->
<input type="password" autocomplete="current-password" />これらを提供しない場合でも、Chromeは推測を試みますが、そうした場合は無視しautocomplete="off"ます。
解決策は、autocompleteパスワードリセットフォームにも値が存在することです。
<label>Enter your old password:
<input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
<input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
<input type="password" autocomplete="new-password" name="pass-repeat" />
</label>このautocomplete="new-password"フラグを使用して、このサイトにパスワードが保存されている場合でも、パスワードを推測しないようChromeに指示できます。
Chromeは、認証情報APIを使用してサイトのパスワードを直接管理することもできます。これは標準であり、おそらく将来的にはユニバーサルサポートになる予定です。
私はこの答えを投稿して、この問題の更新された解決策をもたらします。私は現在Chrome 49を使用していますが、これに対する回答はありません。他のブラウザや以前のバージョンで動作するソリューションも探しています。
このコードをフォームの最初に配置します
<div style="display: none;">
<input type="text" autocomplete="new-password">
<input type="password" autocomplete="new-password">
</div>次に、実際のパスワードフィールドには、
<input type="password" name="password" autocomplete="new-password">これが機能しなくなった場合、または別のブラウザーまたはバージョンで問題が発生した場合は、この回答にコメントしてください。
承認：
入力タイプ属性をに変更しますtype="search"。
Googleは、検索タイプの入力に自動入力を適用しません。
この先週まで、以下の2つのソリューションはChrome、IE、Firefoxで機能するように見えました。ただし、Chromeバージョン48のリリース（および49のまま）では、機能しなくなりました。
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>パスワードinput要素の次のとおりです。
autocomplete = "off"
そのため、これをすばやく修正するために、最初にパスワード入力要素を無効に設定する大規模なハックを試み、次にドキュメント準備機能でsetTimeoutを使用して再度有効にしました。
setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);しかし、これは非常に奇妙に思え、私はさらに検索を行ったところ、Chrome自動入力を無効にするで @tibaltsの回答が見つかりました。彼の答えは、パスワード入力にautocomplete = "new-password"を使用することであり、これはすべてのブラウザーで機能するようです（この段階では、修正番号1を保持しています）。
これは、Google Chrome開発者ディスカッションのリンクです。https： //code.google.com/p/chromium/issues/detail？id = 370363＃c7
autocomplete="off"通常は機能しますが、常に機能するとは限りません。name入力フィールドによって異なります。「アドレス」、「メール」、「名前」などの名前-オートコンプリートされます（ブラウザはユーザーを助けると考えます）。「コード」、「ピン」などのフィールドautocomplete="off"はオートコンプリートされません（設定されている場合）
私の問題は-オートコンプリートがGoogle アドレスヘルパーを乱していた
名前を変更して修正しました
から
<input type="text" name="address" autocomplete="off">に
<input type="text" name="the_address" autocomplete="off">クロム71でテスト済み。
Chrome 42以降、このスレッド（の時点2015-05-21T12:50:23+00:00）のソリューション/ハックは、個々のフィールドまたはフォーム全体のオートコンプリートを無効にするために機能しません。
編集：display: noneオートコンプリートを防ぐために、他のフィールドの前にフォームにダミーのメールフィールドを1つだけ挿入する必要があることがわかりました（これをで非表示にできます）。chromeは、オートコンプリートされたフィールドごとにある種のフォームシグネチャを格納し、別のメールフィールドを含めると、このシグネチャが破損し、オートコンプリートが妨げられると思います。
<form action="/login" method="post">
<input type="email" name="fake_email" style="display:none" aria-hidden="true">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit">
</form>良い知らせは、「フォーム署名」がこれによって破損しているため、どのフィールドもオートコンプリートされないため、送信前に偽のフィールドをクリアするためにJSが必要ないことです。
古い答え：
私がまだ実行可能であることがわかった唯一のことは、実際のフィールドの前にタイプが電子メールとパスワードの2つのダミーフィールドを挿入することです。それらをdisplay: none非表示にするように設定できます（これらのフィールドを無視するほど賢くはありません）。
<form action="/login" method="post">
<input type="email" name="fake_email" style="display:none" aria-hidden="true">
<input type="password" name="fake_password" style="display:none" aria-hidden="true">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit">
</form>残念ながら、フィールドはフォーム内にある必要があります（そうでない場合、両方の入力セットが自動入力されます）。したがって、偽のフィールドが本当に無視されるようにするには、フォーム送信で実行するJSをいくつかクリアして、それらをクリアする必要があります。
form.addEventListener('submit', function() {
form.elements['fake_email'].value = '';
form.elements['fake_password'].value = '';
});上記から、JavaScriptで値をクリアすると、オートコンプリートが上書きされることに注意してください。したがって、JSを無効にして適切な動作を失うことが許容できる場合は、ChromeのJSオートコンプリート「ポリフィル」を使用して、これらすべてを単純化できます。
(function(document) {
function polyfillAutocomplete(nodes) {
for(var i = 0, length = nodes.length; i < length; i++) {
if(nodes[i].getAttribute('autocomplete') === 'off') {
nodes[i].value = '';
}
}
}
setTimeout(function() {
polyfillAutocomplete(document.getElementsByTagName('input'));
polyfillAutocomplete(document.getElementsByTagName('textarea'));
}, 1);
})(window.document);入力フィールドに名前または電子メールのいずれかが使用されるという同様の問題がありました。autocomplete = "off"を設定しましたが、Chromeは引き続き提案を強制しました。プレースホルダーテキストに「name」と「email」という単語が含まれていることが原因でした。
例えば
<input type="text" placeholder="name or email" autocomplete="off" />プレースホルダーの単語にゼロ幅のスペースを入れることで回避しました。Chromeのオートコンプリートはありません。
<input type="text" placeholder="nam​e or emai​l" autocomplete="off" />Chrome 48以降では、次のソリューションを使用します。
偽のフィールドを実際のフィールドの前に置きます：
<form autocomplete="off">
<input name="fake_email" class="visually-hidden" type="text">
<input name="fake_password" class="visually-hidden" type="password">
<input autocomplete="off" name="email" type="text">
<input autocomplete="off" name="password" type="password">
</form>偽のフィールドを非表示にする：
.visually-hidden {
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
position: absolute;
}できたね！
また、これは古いバージョンでも機能します。
autocomplete="off"ていませんform。また、formタグの直後に偽の入力を配置するようにしてください。
設定クロム対34、後autocomplete="off"に<form>タグdoesnの`tの仕事
この厄介な動作を回避するために変更を加えました。
nameおよびを削除しidますpasswordInput）（これまでのところ、Chromeは入力に保存されたパスワードを入力しませんが、フォームは壊れています）
最後に、フォームを機能させるには、ユーザーが送信ボタンをクリックしたとき、またはフォームの送信をトリガーしたいときはいつでも、次のコードを実行します。
var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");私の場合、id="password" name="password"以前はパスワードを入力する必要があったので、送信をトリガーする前に元に戻しました。
Chrome 49にアップデートしましたが、Diogo Cidのソリューションが機能しなくなりました。
ページが読み込まれた後、実行時にフィールドを非表示および削除する別の回避策を作成しました。
Chromeは、最初に表示された type="password"フィールドとその前のtype="text"フィールドに資格情報を適用する元の回避策を無視するため、CSSを使用して両方のフィールドを非表示にしました visibility: hidden;
<!-- HTML -->
<form>
<!-- Fake fields -->
<input class="chromeHack-autocomplete">
<input type="password" class="chromeHack-autocomplete">
<input type="text" placeholder="e-mail" autocomplete="off" />
<input type="password" placeholder="Password" autocomplete="off" />
</form>
<!-- CSS -->
.chromeHack-autocomplete {
height: 0px !important;
width: 0px !important;
opacity: 0 !important;
padding: 0 !important; margin: 0 !important;
}
<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
$(".chromeHack-autocomplete").delay(100).hide(0, function() {
$(this).remove();
});
});あまりエレガントに見えないかもしれませんが、動作します。
私はこの解決策が最も適切であることを発見しました：
function clearChromeAutocomplete()
{
// not possible, let's try:
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0)
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off');
setTimeout(function () {
document.getElementById('adminForm').setAttribute('autocomplete', 'on');
}, 1500);
}
}DOMの準備が整った後、またはフォームがレンダリングされた後にロードする必要があります。
オートコンプリートはユーザーが選択するべきだと私は同意しますが、Chromeはそれに対して熱心すぎます（他のブラウザもそうかもしれません）。たとえば、別の名前のパスワードフィールドには、保存されたパスワードが自動的に入力され、前のフィールドにはユーザー名が入力されます。これは特に、フォームがWebアプリのユーザー管理フォームであり、自動入力で独自の認証情報を入力したくない場合に役立ちます。
現在、Chromeはautocomplete = "off"を完全に無視しています。JSハックはうまくいくかもしれませんが、執筆時に機能する簡単な方法を見つけました。
パスワードフィールドの値を制御文字8（"\x08"PHPまたは HTML）に設定します。これにより、フィールドに値があるため自動入力が停止されますが、これはバックスペース文字であるため、実際の値は入力されません。
はい、これはまだハックですが、私にとってはうまくいきます。YMMV。
form新しいユーザーの作成と既存のユーザーの編集にを再利用するためinput、JSを介して値をオーバーライドするだけでオートコンプリートが削除されました。