ブラウザでフォームを送信すると、通常、ブラウザは「パスワードを覚えておく必要がありますか?」というプロンプトを表示し、確認後、次回フォームを送信するときに特定の入力ボックスが自動的に入力されます。
ただし、一部のシナリオ (出金ページや再チャージ ページなど) では、パスワードを自動的に入力することは非常に安全ではありません。ブラウザの自動入力を防ぐには、何らかの手段が必要です。
解決策のプロセス中にいくつかの落とし穴に遭遇しました。以下にいくつかのメモを示します。
自動入力機能はブラウザ自体によって実装されるため、autocomplete 属性は W3C 仕様に書き込まれません。多くのブラウザはこの属性を単純に無視します。自動入力を無効にすることはできません。
ページ読み込み時にjsを使って入力値を空にする方法を考えるのが自然ですが、ブラウザの自動入力は実際にはjsが実行された後に入力されます。 。 。 js を使用して入力値を空に設定した後、ブラウザーが自動的に入力値を入力しましたが、問題は解決できませんでした。
インターネット上で広く広まっている手法。この方法はほとんどのバージョンのブラウザで実行できますが、一部のブラウザと Safari の上位バージョンでは機能しません。後で紹介するいくつかの方法は、この方法の改良に基づいています。
<!-- 追加入力 --> <input type="password" style="display:none"/> <!-- 元の入力 --> <input type="パスワード"/>
この方法は、上記の方法と比較して、Safari での自動入力の問題を解決します。ただし、Chrome の一部の上位バージョンでは機能しません。 (テスト後、Chrome 46.0 は動作しますが、Chrome 47.0 は失敗します)
<!-- 追加のフォームと入力 --> <form style="display:none"> <input type="パスワード"/> </form> <!-- 元の入力 --> <input type="パスワード"/>
このソリューションは上記の 2 つの方法を組み合わせたもので、最終的に Chrome 47.0 での自動入力の問題を解決します。
<!--追加コンテンツ--> <form style="display:none"> <input type="パスワード"/> </form> <input type="password" style="width:0;height:0;float:left;visibility:hidden"/> <!-- 元の入力 --> <input type="パスワード"/>
この方法で注意が必要なのは、対象のinputと同世代のinputはdisplay:noneに設定できないことです。設定されている場合、Chrome 47.0では自動的に埋められてしまうため、他の手段を使用するしかありません。この入力を非表示にします。
最後のソリューションを使用した後は、さまざまなブラウザーで問題なく動作し、当面は自動入力は見つかりません。案の定、フロントエンドの互換性の問題は常に嫌なものでした。 。
これで、HTML がブラウザのパスワード入力ボックスを記憶する問題を解決する方法についての記事は終わりました。HTML でのパスワード入力ボックスの記憶に関する詳細については、downcodes.com で以前の記事を検索するか、引き続き以下の関連記事を参照してください。今後も downcodes.com をさらに強化していきます!