最近、すべてのブラウザでオートコンプリートを無効にしたいという問題に遭遇しました。
Chromeの設定には、カード番号を追加できる新しい機能があります。そして、要件はそれも無効にすることでした。
すべてのブラウザーで機能したのは、フォームレベルでこのautocomplete = falseを実行することでした。
ただし、これはw3ルールに準拠しておらず、autocomplete = off | onを強制します。
すべてのブラウザでfalseが機能する理由を誰かに説明してもらえますか?
iE8、すべてのFirefox、サファリなどでも。しかし、準拠していません。
あなたが正しいです。自動補完属性を「オフ」に設定しても、Chromeの最新バージョンでChrome自動入力が無効になりません。
ただし、オートコンプリートを "on"または "off"( "false"、 "true"、 "nofill")以外に設定すると、Chrome autofillが無効になります。
この動作は、おそらくオートコンプリート属性が「オン」または「オフ」の値を予期し、他の値を指定しても何もしないためです。そのため、これらの値以外の値を指定すると、オートフィルはバラバラになり、何もしません。
Chromeの現在のバージョンでは、オートコンプリート属性を「オフ」に設定することが実際に機能することがわかりました。
また、これは、フォームの各<input>
タグでオートコンプリート属性を設定した場合にのみ機能することがわかりました。
Chromiumのバグリスト here には、この曖昧さに対する回答があります。
免責事項:これは、Chromeバージョン47.0.2526.106(64ビット)でtrueであることが判明しました
Chromeバージョン72.XXの後:
Chromeは、フィールドレベルとフォームレベルの両方でautocomplete="off"
autocomplete="no-fill"
またはautocomplete="randomText"
を無視します。
私が見つけた唯一のオプションは、回避策に従ってChromeをだましてダミーのテキストボックスとパスワードに自動入力を設定し、ユーザービューから非表示にします。
style="display: hidden"
またはstyle="visibility: hidden"
の古いメソッドも無視されることに注意してください。
修正:
したがって、DIV
をheight: 0px;overflow:hidden
で作成します。これは、HTML要素をレンダリングしますが、ユーザーのビューからは非表示にします。
サンプルコード:
<div style="overflow: none; height: 0px;background: transparent;" data-description="dummyPanel for Chrome auto-fill issue">
<input type="text" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyUsername"></input>
<input type="password" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyPassword"></input>
</div>
HTMLフォーム内に上記のdivを追加するだけで機能します!
autocomplete = "off"の代わりにautocomplete = "my-field-name"を使用します。一部の値はまだautocomplete = "country"のように認識されているため、名前の呼び方に注意してください。また、プレースホルダー属性を使用すると、いくつかのトリッキーなシナリオに役立つことがわかりました。
例:<input type="text" name="field1" autocomplete="my-field-name1" placeholder="Enter your name">
Chromeは最近、autocomplete = "off"の使用を停止しました。フォームがオートコンプリートされるべきかどうかについてあまり考えていなかった開発者が使いすぎだと思ったためです。したがって、彼らは古い方法を取り除いて、新しい方法を使用させて、オートコンプリートを本当に望まないようにしました。
$("#selector").attr("autocomplete", "randomString");
これは毎回確実に機能しました。
注:モーダルショーイベントでこのLOCを呼び出しました。
autocomplete = "none" anglejsで完全に動作し、angular 7
Offおよびfalse以外の自動補完値。
autoComplete="nope"
autoComplete="foo"
autoComplete="boo"
autoComplete="anythingGoesHere"
chrome 76でテストし、16.9.0に反応する