1. ホーム
  2. ジャバスクリプト

[解決済み】ブラウザのオートフィルの検出について

2022-04-09 02:08:54

質問

ブラウザがテキストボックスを自動入力したかどうかを判断するにはどうすればよいですか?特に、ユーザー名とパスワードのボックスは、ページ読み込み時に自動入力されることがあります。

最初の疑問は、この現象がページロードの順序のいつ発生するかということです。document.readyの前でしょうか、後でしょうか?

次に、この現象が発生したかどうかを調べるには、ロジックをどのように使用すればよいですか?この現象が発生しないようにしたいわけではなく、単にイベントにフックしたいだけです。できれば、このようなものが望ましいです。

if (autoFilled == true) {

} else {

}

可能であれば、あなたの答えを示すjsfiddleを見たいです。

重複の可能性

ブラウザのパスワード自動入力のためのDOMイベント?

ブラウザのオートフィルとJavascriptのトリガーイベント

--これらの質問は両方とも、どのようなイベントが発生したかを実際に説明しておらず、ただテキストボックスを継続的に再チェックしているだけです(パフォーマンスには良くありません!)。

どのように解決するのですか?

問題は、ブラウザによって自動入力の扱いが異なることです。あるものはchangeイベントをディスパッチし、あるものはディスパッチしません。そのため、ブラウザが入力フィールドをオートコンプリートしたときに発生するイベントにフックすることは、ほとんど不可能です。

  • ブラウザごとにイベントトリガーを変更する。

    • ユーザー名/パスワードのフィールドの場合。

      1. Firefox 4、IE 7、IE 8 では、change イベントがディスパッチされない。
      2. Safari 5とChrome 9は、changeイベントをディスパッチします。
    • その他のフォームフィールドの場合。

      1. IE 7 と IE 8 では、change イベントがディスパッチされない。
      2. Firefox 4 は、ユーザが候補リストから値を選択し、フィールドからタブで抜け出すと、change change イベントをディスパッチします。
      3. Chrome 9 では、change イベントは発生しません。
      4. Safari 5は、changeイベントをディスパッチします。

最適な方法は、フォームのオートコンプリートを無効にするために autocomplete="off" を入力するか、定期的にポーリングを行い、入力されたかどうかを確認します。

document.readyの前に入力されるかどうかというご質問ですが、これもブラウザやバージョンによって異なります。ユーザー名/パスワードのフィールドについては、ユーザー名を選択したときのみ、パスワードのフィールドが埋められます。そのため、どのようなイベントにも添付しようとすると、非常に面倒なコードになります。

こちらをご覧ください。 こちら