Chromeの自動入力を無効にする
私はいくつかのフォームでchrome autofillの振る舞いに関する問題に遭遇しました。
フォーム内のフィールドはすべて、 "email"、 "name"、 "password"など、非常に一般的で正確な名前を持ち、さらにautocomplete="off"セットもあります。
オートコンプリートフラグは、入力を開始すると値のドロップダウンが表示されるオートコンプリートの動作を無効にしましたが、Chromeがフィールドに自動入力する値は変更されていません。
クロムが入力を誤って入力していることを除いて、この動作は問題ありません。たとえば、電話入力を電子メールアドレスで入力している場合などです。顧客はこれについて不満を言っていたので、それは複数のケースで起こることが確認されており、私が自分のマシン上でローカルに行ったことの何らかの結果としてではありません。
私が考えることができる唯一の現在の解決策は、カスタム入力名を動的に生成してからバックエンドで値を抽出することですが、これはこの問題を回避するためのかなり厄介な方法のように思えます。これを修正するために使用される可能性があるオートフィルの動作を変更するタグや癖がありますか？
Chromeの新しいバージョンの場合は、パスワードフィールドにautocomplete="new-password"を入力するだけです。私はそれをチェックしました、うまくいきます。
このディスカッションでChrome開発者からそのヒントを得ました： https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
P.S自動入力を防ぐために、異なるフィールドに一意の名前を使用することを忘れないでください。
サイトのユーザー名とパスワードを覚えている場合、現在のバージョンのChromeでは、ユーザー名/メールアドレスがany 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" />
これはうまくいき、ほとんど問題を解決します。
ただし、パスワードフィールドがなく、Eメールアドレスしかない場合は機能しません。それはまたそれが黄色になるのをやめて予備充填するのをやめるようにすることを困難にすることができます。これを修正するために偽のフィールドソリューションを使用することができます。
実際には、2つの偽のフィールドをドロップして別の場所で試す必要がある場合があります。たとえば、フォームの最初にすでに偽のフィールドがありましたが、Chromeは最近自分の「メール」フィールドに再度入力するようになりました。 。フィールドの1番目または2番目のロットを削除すると、誤った過度の自動入力に戻ります。
何ヶ月にも及ぶ闘争の末、私はあなたが想像できるよりもずっと簡単な解決策であることがわかりました。
autocomplete="off"の代わりにautocomplete="false";を使用してください。
それと同じくらい簡単です、そしてそれは同様にグーグルクロムの魅力のように働きます！
時にはautocomplete=offでも資格情報を間違ったフィールドに記入するのを妨げないことがあります。
これを回避するには、readonly-modeを使用してブラウザのオートフィルを無効にし、書き込み可能をフォーカスに設定します。
<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でこの奇妙な動作に気付くことがあります。それから autofills usernameを最も近いtextlike-inputフィールドに入力します。これはDOMのパスワードフィールド の前に現れます（単に観察のために推測される）ブラウザが最後のインスタンスであり、あなたはそれを制御することはできませんので、
上のこのreadonly-fixは私のために働きました。
これを試して。私はその質問がやや古いことを知っていますが、これは問題に対する別のアプローチです。
また、問題が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="" />
誰かに役立つことを願っています。
検索ボックス機能を実装している場合は、次のようにtype属性をsearchに設定してください。
<input type="search" autocomplete="off" />
これはChrome v48で動作しており、正当なマークアップのようです。
私はその理由を知りませんが、これは私にとって助けとなりました。
<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でした
それはとてもシンプルでトリッキーです:)
google chromeは基本的に 最初に見えるパスワード要素 <form>、<body>、<iframe>タグ内を検索して自動補充を有効にするので、これを無効にするには次のようにダミーのパスワード要素を追加する必要があります。
あなたのパスワード要素が
<form>タグの中にあるならば、あなたは<form>オープンタグの直後にあなたのフォームの最初の要素としてダミー要素を置く必要があります。あなたのパスワード要素が
<form>タグの内側にない場合は、<body>オープンタグの直後にあなたのhtmlページの最初の要素としてダミー要素を置きます。
Css
display:noneを使用せずにダミー要素を非表示にする必要があるので、基本的に次のものをダミーのパスワード要素として使用します。<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
Googleは人々が行っているように見えるすべての回避策を無効にすることを主張しているので、ここに私が提案した解決策があります。
オプション1 - クリックですべてのテキストを選択
入力の値をユーザーの例（[email protected]）、またはフィールドのラベル（例Email）に設定し、入力にfocus-selectというクラスを追加します。
<input type="text" name="email" class="focus-select" value="[email protected]">
<input type="password" name="password" class="focus-select" value="password">
そして、これがjQueryです。
$(document).on('click', '.focus-select', function(){
$(this).select();
});
私はChromeがこれまでに値を台無しにするのを見ることができません。それはクレイジーだよ。だからうまくいけばこれは安全な解決策です。
オプション2 - emailの値をスペースに設定してから削除する
Emailとpasswordなどの2つの入力があると仮定して、emailフィールドの値を" "（スペース）に設定し、属性/値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ノートを保管してください！また、隠し入力の名前が適切であることを確認してください。
場合によっては、autocomplete属性がoffに設定されていても、ブラウザは自動補完値を提案し続けます。この予想外の振る舞いは開発者にとってかなり戸惑うことがあります。本当に無補完を強制するためのトリックは、 属性にランダムな文字列を割り当てることです
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'">
type-password を使用せずにcss text-security：disc を使用します。
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;
}
マイクネルソンズ提供の解決策は、Chrome 50.0.2661.102メートルで私のために動作しませんでした。 display：none setと同じタイプのinput要素を追加するだけで、ネイティブブラウザのオートコンプリートが無効になることはなくなりました。オートコンプリートを無効にしたい入力フィールドの名前属性を複製する必要があります。
また、フォーム要素内にあるときに入力フィールドが重複しないようにするには、表示されていない要素にdisabledを配置する必要があります。これにより、その要素がフォームアクションの一部として送信されなくなります。
<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
プレースホルダを維持しながらクロム自動入力を無効にすることに問題がある場合、この回避策を見つけました。
問題
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を使用している場合はプレースホルダーを複製できますが、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;
}
W3Cにありますが、2016年にGoogle Chromeはautocomplete=offを無視し始めました。 彼らが投稿した答え ：
ここでの注意が必要なのは、Webの自動補完= offの過程のどこかで、多くのフォームフィールドでデフォルトが使用されるようになったことです。これは、ブラウザにデータを自動入力させたくないというような非常に有効なケースがないことを意味するわけではありません（たとえば、CRMシステム）。その結果、Chrome Autofillデータのautocomplete = offを無視し始めました。
これは本質的に言っています：私たちはユーザーが何を望んでいるのかよく知っています。
autocomplete = offが必要な場合に有効なユースケースを投稿するために別のバグをオープンしました
オートコンプリートに関連した問題が私のすべてのB2Bアプリケーションで見られることはありませんでしたが、パスワードタイプの入力だけでした。
隠されているものであっても画面にパスワードフィールドがある場合は、オートフィルがステップインします。このロジックを破るために、あなたがそれ自身のページロジックを壊さないのであれば、あなたはそれ自身のフォームに各パスワードフィールドを入れることができます。
<input type=name >
<form>
<input type=password >
</form>
ここではautocompleteをoffに設定することでうまくいくはずです。ここでは検索ページでGoogleが使用している例を示します。これをinspect要素から見つけました。
edit ：offが機能しない場合はfalseまたはnofillを試してください。私の場合、それはクロムバージョン48.0で働いています
私たち全員がこの問題を抱えているので、私はこの問題のために働くjQuery拡張を書くためにしばらく時間をかけました。 GoogleはHTMLマークアップに従う必要があります。Googleには従っていません
(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();
});
私は本当に隠しフィールドを作るのが好きではなかった、そのようにすることは本当に混乱することが本当に速くなると思う。
オートコンプリートから停止したい入力フィールドでは、これは機能します。フィールドを読み取り専用にし、フォーカスを合わせて、このような属性を削除します。
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
これを行うには、最初に 読み取り専用属性を削除する必要があります その時点で、おそらく自分のユーザー入力を入力して autofill を引き継いで引き継ぐことになります。
これには2つの部分があります。 Chromeや他のブラウザは以前に入力されたフィールド名の値を記憶し、それに基づいてユーザーにオートコンプリートリストを提供します（特に、パスワードタイプの入力は never になります。あなたのEメールフィールドのようなものでこれを防ぐためにautocomplete="off"を追加することができます。
ただし、パスワード入力者があります。ほとんどのブラウザには独自の組み込み実装があり、この機能を提供する多くのサードパーティ製ユーティリティもあります。これ、あなたは 止めることはできません 。これは、後で自動的に入力されるようにこの情報を保存するための独自の選択を行うユーザーであり、アプリケーションの影響範囲および影響範囲から完全に外れています。
別の解決策、ウェブキットベース。すでに述べたように、Chromeはパスワードフィールドを見つけるたびにメールを自動補完します。残念ながら、これはautocomplete = [whatever]とは無関係です。
これを回避するには、入力タイプをテキストに変更し、Webkitセキュリティフォントを任意の形式で適用します。
.secure-font{
-webkit-text-security:disc;}
<input type ="text" class="secure-font">
私が見ることができるものから、これは少なくともinput type = passwordと同程度に安全である、それはコピーアンドペーストで安全です。ただし、アスタリスクを削除するスタイルを削除することで脆弱です。もちろん、自動入力されたパスワードを表示するためにコンソールでinput type = passwordをinput type = textに簡単に変更することができるので、ほとんど同じです。
これはautocomplete = offで無効にすることができ、chromeの詳細設定で明示的に保存されたアドレスはアドレスフィールドがフォーカスを得たときにオートフィルポップアップを表示します。autocomplete = "false"で無効にできます。ただし、クロムはドロップダウンでキャッシュされた値を表示することができます。
以下の入力HTMLフィールドでは、両方ともオフになります。
Role="presentation" & autocomplete="off"
住所自動入力の入力フィールドを選択している間、Chromeは、label html要素の前にない入力フィールドを無視します。
クロムパーサーが自動入力アドレスポップアップの入力フィールドを無視するようにするために、ラベルとテキストボックスの間に隠しボタンまたは画像コントロールを追加できます。これはオートフィルのためのラベル - 入力ペア作成のクロム構文解析シーケンスを壊すでしょう。住所フィールドの解析中にチェックボックスが無視される
Chromeはlabel要素の "for"属性も考慮します。クロムの解析シーケンスを中断するために使用できます。
Chromiumバグレポート＃352347 Chromeは、フォームでも入力でもautocomplete="off|false|anythingelse"を尊重しなくなりました。
私のために働いた唯一の解決策は ダミーのパスワードフィールドを追加することでした ：
<input type="password" class="hidden" />
<input type="password" />
これが汚いハックです -
ここにあなたの要素があります（disabled属性を追加する）：
<input type="text" name="test" id="test" disabled="disabled" />
そして、あなたのWebページの一番下にJavaScriptを入れてください。
<script>
setTimeout(function(){
document.getElementById('test').removeAttribute("disabled");
},100);
</script>
私にとってうまくいった次のjQueryコードを試してください。
if ($.browser.webkit) {
$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="email"]').attr('autocomplete', 'off');
}
「これが私のために働いた」答えや完全なハックのように見える他の答えの代わりに...これは現在chrome（そして最新のspec）があなたのautocomplete要素のinput属性を扱う方法です：
https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=ja
TLDR：あなたの入力にautocomplete='<value>'を追加してください。ここで<value>はフィールドが何をするのかを定義する任意の文字列であるべきです。これはname属性と同様に機能します。可能であれば、上記のリンクで推奨値を使用してください。
また、フォームからautocomplete属性を削除してください。
私にとってうまくいく唯一の方法は次のとおりです。（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">
値に空白を入れてみてください。
<input type="email" name="email" value=" ">
<input type="password" name="password" value=" ">
クロム54.0.2840.59
パスワードフィールドにautocomplete="new-password"を追加する最新の解決策は、Chromeが自動入力を防ぐのに役立ちます。
ただし、sibblが指摘したように、フォームの送信が完了した後にChromeがパスワードの保存を求めてくるのを防ぐことはできません。 Chrome 51.0.2704.106の時点で、私はあなたが属性autocomplete="new-password"を持つ見えないダミーのパスワードフィールドを追加することによってこれを達成できることを発見しました。この場合、 "display：none"は機能しません。例えば実際のパスワードフィールドの前に次のようなものを追加します。
<input type="password" autocomplete="new-password"
style="visibility:hidden;height:0;width:1px;position:absolute;left:0;top:0">`
これは、幅をゼロ以外の値に設定した場合にのみ有効でした。元の答えのためにtibaltと運賃namroutiに感謝します。
上記のどれもChrome 63以降では動作しないようですので私の回避策
問題のあるinput要素を
<p class="input" contenteditable="true"> </p>
また、送信前にjQueryを使用して非表示フィールドを設定します。
しかし、これはChromiumでの悪い決断によって必要とされた本当にひどいハックです。
私はついにtextareaを使って成功を見つけました。パスワードフィールドには、入力した各文字を "•"に置き換えるイベントハンドラがあります。
クロムが実際に多くのフィールドを埋めるので、それが適切に機能するためにいくつかの追加フィールドが必要でした。また、表示よりも格好の良い方法でフィールドを非表示にする必要がありました。実際に機能するためには、どれも使用しません。
<style>.stylish { position:absolute; top:-2000px; }</style>
<input id="_____fake_email_remembered" class="stylish" tabindex="-1" type="email" name="email_autofill"/>
<input id="_____fake_userName_remembered" class="stylish" tabindex="-1" type="text" name="userName_autofill"/>
<input id="_____fake_firstName_remembered" class="stylish" tabindex="-1" type="text" name="firstName_autofill"/>
<input id="_____fake_lastName_remembered" class="stylish" tabindex="-1" type="text" name="lastName_autofill"/>
<input id="_____fake_phone_remembered" class="stylish" tabindex="-1" type="text" name="phone_autofill"/>
<input id="_____fake_address_remembered" class="stylish" tabindex="-1" type="text" name="address_autofill"/>
<input id="_____fake_password_remembered" class="stylish" tabindex="-1" type="password" name="password_autofill"/>
<input id="_____fake_password_remembered2" class="stylish" tabindex="-1" type="password" name="passwordRepeated_autofill"/>
Dvd Francoが言ったように、私にとっては、すべてのフィールドにautocomplete = 'off'を入れるだけでした。だから私はこのjqueryのルールを$（document）.ready（）に入れます。メインの.jsファイルに対する関数
$('form.no_autofill').attr('autocomplete','off');
$('.no_autofill input').attr('autocomplete','off');
私の解決策は3つのことにかかっています。
- キーダウンイベント
- フィールド名を隠す
- 送信時にフィールド値を空白にする
まず最初に、ユーザー名とパスワードの両方のオートコンプリートを防ぐ必要があるので、最初にi - > usernameとj - > passowrdの2つのフラグにtrueの値を設定します。本当です。
場合によっては、フィールドマスキングはランダムな文字列を渡すことによってサーバー側で行われますが、クライアント側でも簡単に作成できます。
これはコードです：
$(document).ready(function(){
i= true; //username flag
j= true; // password flag
$("#username{{$Rand}}").keydown(function(e){
// {{$Rand}} is server side value passed in blade view
// keyboard buttons are clicked in the field
i = false;
});
$("#passowrd{{$Rand}}").keydown(function(e){
// {{$Rand}} is server side value passed in blade view
// keyboard buttons are clicked in the field
j = false;
});
// Now we will use change event,
$("#username{{$Rand}}").change(function(){
if($(this).val() != ''){ //the field has value
if(i){ // there is no keyboard buttons clicked over it
$(this).val(''); // blank the field value
}
}
})
$("#password{{$Rand}}").change(function(){
if($(this).val() != ''){ // the same as username but using flag j
if(j){
$(this).val('');
}
}
})
$("#sForm").submit(function(e){ // the id of my form
$("#password-s").val($("#password{{$Rand}}").val());
$("#username-s").val($("#username{{$Rand}}").val());
// Here the server will deal with fields names `password` and `username` of the hidden fields
$("#username{{$Rand}}").val('');
$("#password{{$Rand}}").val('');
})
})
これがHTMLです。
<form class="form-horizontal" autocomplete="off" role="form" id="sForm" method="POST" action="https://example.com/login">
<input type="hidden" name="password" id="password-s">
<input type="hidden" name="username" id="username-s">
<label for="usernameTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Username</label>
<input id="usernameTDU3m4d3I5" placeholder="Username" autocomplete="off" style="border-bottom-left-radius: 10px; border-top-right-radius: 10px; font-family: fixed; font-size: x-large;" type="text" class="form-control" name="usernameTDU3m4d3I5" value="" required="required" autofocus="">
<label for="passwordTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Password</label>
<input id="passwordTDU3m4d3I5" placeholder="Password" autocomplete="off" type="password" class="form-control" name="pa-TDU3m4d3I5" required="">
<button type="submit" class="btn btn-success">
<i class="fox-login" style="text-shadow: 0px 1px 0px #000"></i><strong>Login</strong>
</button>
</form>
上記の解決策は、実際には、ユーザー名とパスワードのオートコンプリートを排除または防止するものではありませんが、そのオートコンプリートは無用になります。つまり、フィールドのキーボードボタンを押さなくても、送信前にフィールドの値は空白になるため、ユーザーに入力を求められます。
更新
次のようなフィールドの下に表示されたユーザーリストからのオートコンプリートを防ぐために、clickイベントを使用することもできます。
$("#username{{$Rand}}").click(function(){
$(this).val('');
i = true;
})
$("#password{{$Rand}}").click(function(){
$(this).val('');
j = true;
})
制限事項
この解決策 できないかもしれません タッチスクリーンデバイスでは期待通りに動作します。
最終更新
私は次のように次のようなクリーンな実装をしました。
preventAutoComplete = true; // modifier to allow or disallow autocomplete
trackInputs = {password:"0", username:"0"}; //Password and username fields ids as object's property, and "0" as its their values
// Prevent autocomplete
if(preventAutoComplete){
$("input").change(function(e){ // Change event is fired as autocomplete occurred at the input field
trackId = $(this).attr('id'); //get the input field id to access the trackInputs object
if (trackInputs[trackId] == '0' || trackInputs[trackId] != $(this).val()){ //trackInputs property value not changed or the prperty value ever it it is not equals the input field value
$(this).val(''); // empty the field
}
});
$("input").keyup(function(e){
trackId = $(this).attr('id');
trackInputs[trackId] = $(this).val(); //Update trackInputs property with the value of the field with each keyup.
});
}
Chromium 53.0.2785.92（64-bit）では、以下が機能しました。
<div style="visibility:hidden">
<input type="text" name="fake_username_remembered">
<input type="password" name="fake_password_remembered">
</div>
display:noneが機能しない
だから、どうやらこれのための最善の修正/ハックは、もはや動作しなくなりました。私が使っているChromeのバージョンはバージョン49.0.2623.110 mで、私のアカウント作成フォームには保存されたユーザー名とパスワードが表示されますが、これらはフォームとは関係ありません。 Chromeありがとう。他のハックはひどいようでしたが、このハックはそれほどひどいものではありません...
これらのハックが機能する必要があるのは、これらのフォームは一般にアカウント作成フォームであること、つまりパスワードを入力することを許可されるべきログインフォームではないためです。アカウント作成フォームでは、ユーザー名とパスワードを削除する手間は不要です。論理的には、パスワードフィールドはレンダリング時に入力されないことを意味します。だから私はjavascriptのビットと一緒に代わりにテキストボックスを使います。
<input type="text" id="password" name="password" />
<script>
setTimeout(function() {
$("#password").prop("type", "password");
}, 100);
// time out required to make sure it is not set as a password field before Google fills it in. You may need to adjust this timeout depending on your page load times.
</script>
ユーザーは短期間でパスワードフィールドにアクセスできないのでこれは許容できると思います。また、フィールドがパスワードフィールドであっても平文で送信されるため、サーバーにポストバックしても違いはありません。
警告：私と同じように、更新フォームと同じ作成フォームを使用すると、作業が面倒になるかもしれません。 mvc.asp c＃を使用していますが、@ Html.PasswordFor（）を使用すると、パスワードが入力ボックスに追加されません。これはいいことです。私はこれについてコーディングしました。しかし、@ Html.TextBoxFor（）とパスワードを使用すると入力ボックスに追加され、パスワードとして隠されます。しかし、私のパスワードはハッシュ化されているので、入力ボックスのパスワードはハッシュ化されたパスワードであり、決してサーバーにポストバックされるべきではありません。この方法を使用する場合、入力ボックスが表示される前にパスワードを空の文字列に設定することを忘れないでください。
display: noneが機能しない場合、これも可能であり、機能しているようです（Chrome v60.0.3112.113）。
.hidden-fields {
opacity: 0;
float: left;
height: 0px;
width: 0px;
}
<input type="text" name="username" class="hidden-fields">
<input type="password" name="password" class="hidden-fields">
<your actual login fields></your actual login fields>
最後に、私はまともな解決策を思いついたと思います。ドロップダウンがChromeでどのように機能するかを理解するのに役立ちました:)基本的に、ドロップダウンはChromeがメモリに持っているものと一致するエントリを入力しているときに入力にフォーカスしたときとマウスダウンイベントを生成するときに表示されます。このことを念頭に置いて、Chromeが特定の入力に対して "name"、 "email"などのデフォルト名を持っている場合はそれを実行します。ドロップダウンが表示されるときにその名前を削除して追加し直す必要があります。 :)属性のオートコンプリートをオフにするだけでうまくいくような解決策を使いたかったのです。私はそれが理にかなっていると思いました。これはコードです：
解決策1
jQuery('body').on('mousedown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName =="undefined")
this.currentName=jQuery(this).attr('name');
jQuery(this).attr('name','');
});
jQuery('body').on('blur','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
jQuery(this).attr('name',this.currentName);
});
解決策2（私のお気に入りのもの）
私が上で説明した解決策は、フォーカス（ぼかし）を削除するまで入力の名前を削除します。その瞬間、元の名前に戻ります。ただし、入力中にname属性を介して入力にアクセスすることに関心がある場合があります。つまり、各入力の直後に名前を元に戻す必要があります。この解決策は、基本的に最初の解決策に基づいています。この場合は、キーを押したときに名前を追加し、キーを押したときに元に戻します。私はこれが「オートコンプリートオフ」の振る舞いがどうあるべきかとの互換性のためにもっときれいだと思います。とにかくこれはコードです：
jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName =="undefined")
this.currentName=jQuery(this).attr('name');
jQuery(this).attr('name','');
});
jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName !="undefined")
jQuery(this).attr('name',this.currentName);
});
解決方法1と2では、入力名が "name"と "email"の場合を取り上げました。この属性によってChromeがドロップダウンを生成するような場合は、マウスダウンイベントのセレクタに追加する必要があります。
解決策3
この解決策はもっと面倒です。私たちが修正しようとしている振る舞いが、単に「名前、電子メールなど」のような特定の名前の入力に基づいていることに気づきませんでした。このソリューションのアプローチは、その場合、Chromeがアプリオリに知らない他の名前を表示することでした。それは非常に一般的な解決策でしょう。私は他の2ほど好きではありません、基本的に私達が削除キーを押すとき小さいちらつきがあるかもしれないので。私はそのことを説明します。
ドロップダウンは、入力を2回クリックした後に表示されていましたが、入力に最初に注目したときに最初のクリックでは表示されていませんでした。これらすべての要素に "mousedown"イベントをバインドします。この場合、ハンドラは基本的に既に入力にフォーカスがあるかどうかを検出し、別の "マウスダウン"を検出した場合は.blur（）を強制2回目のクリックがフォーカスされたときのドロップダウン念のため、ここで私が使用したコードがあることを念頭に置いてください。
jQuery('body').on('mousedown','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(jQuery(this).is(':focus')) {
jQuery(this).blur();
jQuery(this).focus();
}
});
その一方で、あなたがそれがChromeの提案と一致する場合に備えてあなたがタイプしている間ドロップダウンを防ぐために...これは少しトリッキーです。ユーザーが入力している間、入力のデフォルトの動作を置き換えることにしました。ドロップダウンはマウスダウンで入力を評価するので、英数字、スペースなどのデフォルトの動作を妨げます。唯一の問題はCommand、Ctrl、deleteです。この場合、私はマウスアップイベントもバインドしなければなりませんでした。最初の2つのケースではデフォルトの動作が許可されているので、コピー、貼り付け、またはすべて選択できます。削除の場合は、デフォルトの動作を許可する必要がありますが、文字を削除した後に入力がChromeの推奨と一致する場合は、ドロップダウンが表示されます。この場合、ぼかしとフォーカスの同じトリックを使用しなければなりませんでした。私がこれに関して見つけた唯一の不便は、我々がキーアップの上でふるまいをキャンセルしていて、そしてクロムがキーダウンでそれを見せようとしているので、小さいちらつきがあるということです。とにかく、これは私ができる最善です。おそらくそれは一点で文字のフィルタリングを必要とするでしょう。私は今のところもっと理にかなった条件を追加しました。これはコードの2番目の部分です。
jQuery('body').on('keydown','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
var ctrlKey = 17,cmKey = 91;
var charCode = e.which || e.keyCode;
if(charCode!=16 && this.commandDown != true && this.ctrlDown != true && ((charCode>47 && charCode<58)||(charCode>64 && charCode<91)||(charCode>96 && charCode<123)||charCode==0 || charCode==32)){
e.preventDefault();
var charStr = String.fromCharCode(charCode);
if(!e.shiftKey)
charStr = charStr.toLowerCase(charStr);
$(this).val($(this).val() + charStr);
}else{
if (charCode == cmKey) this.commandDown = true;
if (charCode == ctrlKey) this.ctrlDown = true;
}
});
jQuery('body').on('keyup','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
var allowed=[8];//Delete
var ctrlKey = 17,cmKey = 91;
var charCode = e.which || e.keyCode;
if (charCode == cmKey) {this.commandDown = false};
if (charCode == ctrlKey) {this.ctrlDown = false};
if(allowed.indexOf(charCode)>=0 || (this.commandDown!=false && this.ctrlDown!=false)){
jQuery(this).blur();
jQuery(this).focus();
}
私が言ったように、この解決策はもっと面倒です。特定の入力名に対してドロップダウンが表示されることに気付くまで、私が最初に使用したものです。
そんなに書いてすみません、私はちょうどすべてが明確であることを確認したかったです。助けになれば幸いです。
ブーム、グーグルクロームと他の誰もが当時これを破ることを試みる。
私はこれを2017年9月7日に実装することができましたが、私のMVC Viewで生成されたランダムな文字列のFormCollectionを使用しました。
私は最初に私のログインページの私のインデックスコントローラで新しいランダムキーを取得し、新しい完全にユニークなランダムな文字列を暗号化して作成します（私は実際にこれを実行するために256ビットの暗号を使いました）後で再表示するView Controllerからユーザ名とパスワードを識別するのに役立つように、各文字列の最後にプレーンテキストの「Username」と「Password」があります。あなたがパターンを知っていて、それがユニークである限り、あなたはそのプレーンな文字列を何かに変えることもできます。
私の考えでは、これらの変数を適切に使用してから応答側のコントローラでFormCollectionを検索して一致する変数を見つけ、その項目のKey-Valueを対応するユーザー名とパスワードとして使用して適切に処理しました。
私が持っていた私が持っていたもう一つの問題はChromeにこっそりあると思う
何かご意見は ？
<style>
@@font-face {
font-family: 'password';
font-style: normal;
font-weight: 400;
src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}
</style>
<input type="text" name="@Model.UsernameRandomNameString" />
<input style="font-family: 'password'" type="text" name="@Model.PasswordRandomNameString" />
LogOnModel model = new LogOnModel()
{
UsernameRandomNameString = Cryptography.SimpleEncrypt("Username", UniqueGeneratorKey, UniqueGeneratorKey) + "Username",
PasswordRandomNameString = Cryptography.SimpleEncrypt("Password", UniqueGeneratorKey, UniqueGeneratorKey) + "Password",
};
私はそれが回避策の地獄だと思う、しかしそれはうまくいく、そして私はそれが将来の証拠になるかもしれないと思う。 - しかしそれは少し劇的です。
Angularユーザーの場合：
autocomplete = 'off'は新しいクロムバージョンを無視するので、クロム開発者はautocomplete = 'false |を推奨します。 random-string '、グーグルクロム/現代のブラウザは2種類のユーザーヘルパーを持っています -
autocomplete='off'（最後にキャッシュされた候補を防ぎます）。autocomplete = 'false | random-string'（ 'random-string'はブラウザに認識されていないため、これは自動入力設定を妨げます）。
それで、迷惑な提案を両方とも無効にした場合はどうすればいいですか。これがトリックです： -
- すべての入力フィールドに
autocomplete = 'off'を追加してください。 （または単純なJquery）.
例 ：$("input").attr('autocomplete', 'off');
- HTMLコードから
<form name='form-name'>タグを削除し、ng-form = 'form-name'コンテナーに<div>を追加します。ng-form="form-name"を追加しても、すべての検証が保持されます。
私はすべての言及されたアドバイスを試しましたが、どれもうまくいきませんでした。特定の入力にGoogleプレイスのオートコンプリートを使用していますが、Googleプレイスのオートコンプリートリストの上にGoogle Chromeのオートフィルがあると非常に見苦しいです。 autocomplete = "anything"と設定しても意味がありません。オートコンプリートプラグイン自体がこのattrを "off"に設定しているため、chromeではまったく無視されます。
だから私の解決は：
var fixAutocomplete = window.setInterval(function(){
if ($('#myinput').attr('autocomplete') === 'false') {
window.clearInterval(fixAutocomplete);
}
$('#myinput').attr('autocomplete', 'false');
}, 500);
純粋なHTMLソリューション ：
（JavaScriptは不要、CSSは不要、隠し入力は不要）
<form autoComplete="new-password" ... >
<input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>
ノート：
- formは必ずしもinput要素の直接の親である必要はありません
- 入力には名前属性が必要です
私は「今すぐサインインまたは登録する」モーダルウィンドウでこの問題を抱えていましたが、ユーザーが自分の資格情報をブラウザに保存した場合は問題でした。サインインフィールドと登録フィールドの両方が入力されているので、次の角度付きjsディレクティブを使用してそれらをクリアできました。
(function () {
"use strict";
var directive = function ($timeout) {
return {
restrict: "A",
link: function (scope, element, attrs) {
$timeout(function () {
element.val(" ");
$timeout(function () {
element.val("");
});
});
}
};
};
angular.module("app.directives").directive("autofillClear", ["$timeout", directive]);
}());それは基本的にjqueryを使用するであろう以前の答えのいくつかと同じですが、角度のある方法で行われます。
Symfonyのフォームを使用している場合、FormBuilderを使用するのではなく、属性が小枝のテンプレートから適用される場合はautocomplete=offは機能しません。
これを使って：
....
->add('field-name', TextType::class, array(
'attr' => array(
'autocomplete' => 'off'
)
)
....
のではなく：
....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....
Input type = "text"を複数行の入力に変更するために行ったことです。
overflow-x:hidden;
overflow-y:hidden;
vertical-align:middle;
resize: none;
コードの簡単な説明：overflow-xと-yは、textareaボックスの右側にあるスクロールボタンを無効にします。垂直方向の余白は、ラベル領域の垂直方向の中央とテキスト領域およびサイズ変更を揃えます。noneは、テキスト領域の右下にあるサイズ変更グラバーを無効にします。
つまり、テキスト領域はテキストボックスのように表示されますが、クロムのオートフィルはオフになっています。
これは厳密には関係ないことを私は知っていますが、ここに私がしたことがあります。自動入力されたフィールドは 'change'イベントを発生させますが、あなたがそれをできるだけ早くそれらにバインドした場合だけです。
だから私はこれを頭の部分の内側に置いた。
$(document).ready(function(){
$('input').on('change',function(){$(this).val('')})
});
そしてそれは私のために働いた。
私のハック - Chrome 48でテスト済み：
Chromeはフィールドの種類を調べようとしているので、それは<input>のidやname属性のようなものだけでなく、関連する<label>コンテンツも調べることで、これらの意味のない名前を見つける必要があります。
idとnameについては、 here 以外のものを選ぶのは簡単です。
labelについては、目に見えない<span>を途中に挿入しました。都市の場合（my プレースオートコンプリートでめちゃくちゃになります） ：
<span>Ci<span style="display:none">*</span>ty</span>
完全な作業例：
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/register">
<div>
<label for="name">Name</label>
<input id="name" type="text" name="name" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" name="email" />
</div>
<div>
<label for="id1">City</label>
<input id="id1" type="text" name="id1" /> <-- STILL ON :(
</div>
<div>
<label for="id2">Ci<span style="display:none">*</span>ty</label>
<input id="id2" type="text" name="id2" /> <-- NOW OFF :)
</div>
</form>
</body>
</html>Jobin Joseの回答が私に始まりました。これは私のために働くものです：
<input type="password" name="password" id="password_fake" style="display:none;" />
<input type="password" name="password"/>
解決策を台無しにするautocomplete = "off"がないようにしてください。
私の問題は、私が自分のデータベースから可能な値を自動的に提案していたので、ChromeがBootstrapオートコンプリートインターフェイスを介して郵便番号をオートフィルすることでした。
私がしなければならなかったこと：
- 入力フィールドの
idプロパティを "郵便番号"以外のものに変更します。 - 入力フィールドの
autocomplete値をfalseに変更します $('#postcode_field').autocomplete(...)を呼び出した後、Boostrapのオートコンプリートプラグインが自動的にoffに変更するので、$('#postcode_field').prop('autocomplete', 'false');でautocompleteプロパティをリセットしなければなりませんでした。
Display noneはもはや機能しないようですので追加してください。
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
オーバーフローを隠したdivの内側、最大幅と最大高さ
だからそれは次のようになります：
<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
</div>
Usernameフィールドに値 ''（空白）を入力します。
<input type = 'text' value = ' ' name = 'username' />
ユーザー名にユーザー入力値を入力したことがある場合は、ユーザー入力値がない場合は「」を入力するようにコーディングします。
編集：私はまた 'username'以外の何かの名前を持つように 'username'フィールドを変更する必要がありました。 'nameofuser'
それを機能させるには、autocomplete = "off"以外にも値を空（value = ""）に設定する必要があります。
「display：none;」を追加して非表示にする方法フォームがJavaScriptによって生成されたものである場合、入力に対して私にはうまくいきませんでした。
その代わりに私はそれらを見えなくすることによってそれらを見えなくしました：
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="text" name="fakeusernameremembered"/>
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="password" name="fakepasswordremembered"/>
残念ながら、解決策はどれもうまくいかないようです。を使用して電子メール（ユーザー名）を削除できました
<!-- 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"/>
技術は、しかしパスワードはまだ入力されています。
1月20日クロム更新
偽のフィールドの追加やautocomplete = new-passwordの設定など、上記の解決策はいずれも機能しません。はい、これらのクロムは自動補完しませんが、あなたがパスワードフィールドを入力するとき、それは再びパスワードを提案します。
私はあなたがパスワードフィールドを削除し、それからそれを再び追加するなら idなしで そしてchromeはそれを自動入力せず、入力時にパスワードを示唆しません。
IDではなくクラスを使用してパスワード値を取得します。
Firefoxの場合は、まだダミー要素を追加する必要があります。
この解決法では、フラグに基づいてオートコンプリートを許可/禁止することもできます。
html：
<!-- form is initially hidden, password field has a dummy id and a class 'id' -->
<form id="loginForm" style="display:none;">
<span>email:</span><input type="text" placeholder="Email" id="loginEmailInputID"/>
<span>Password:</span><input class="loginPasswordInput" type="password" placeholder="Password" id="justForAutocomplete"/>
</form>
ページロード：
function hideAutoComplete(formId) {
let passwordElem=$('#'+formId+' input:password'), prev=passwordElem.prev();
passwordElem.remove();
prev.after($('<input type="password" style="display:none">'), passwordElem.clone().val('').removeAttr('id'));
}
if (!allowAutoComplete) hideAutoComplete('loginForm');
$('#loginForm').show();
パスワードが必要な場合
$('.loginPasswordInput').val();
これらの質問に対する他の解決策のどれも私のために働きませんでした。
うまくいったと思うのは これだけ ：
要素から "name"と "id"属性を削除し、1ms後にそれらを割り当てます。これを文書に入れて準備してください。
$(document).ready(function() {
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
});
解決策のどれも私のために働きませんでした。最後に、何時間も髪を引っ張った後、私はReactJSのためのこの解決策を思い付きました。
FireFox 54.0.1、Chrome 61.0.3163.100、Mac OS 10.13でテスト済み
type="text"を保持し、onChangeイベントで関連する型に変更します。
例：HTML：
<input type="text" onChange={this.setAttributes} placeholder="Email" />
JS：
setAttr2: function(e){
var value = e.target.value;
if(value.length){
e.target.setAttribute('type', 'email')
} else {
e.target.setAttribute('type', 'text')
}
}
このトリックにより、オートコンプリート機能は無効になりました。 できます！
[HTML]
<div id="login_screen" style="min-height: 45px;">
<input id="password_1" type="text" name="password">
</div>
[JQuery]
$("#login_screen").on('keyup keydown mousedown', '#password_1', function (e) {
let elem = $(this);
if (elem.val().length > 0 && elem.attr("type") === "text") {
elem.attr("type", "password");
} else {
setTimeout(function () {
if (elem.val().length === 0) {
elem.attr("type", "text");
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
}, 1);
}
if (elem.val() === "" && e.type === "mousedown") {
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
});