[解決済み】ブラウザのオートフィルの検出について
質問
ブラウザがテキストボックスを自動入力したかどうかを判断するにはどうすればよいですか?特に、ユーザー名とパスワードのボックスは、ページ読み込み時に自動入力されることがあります。
最初の疑問は、この現象がページロードの順序のいつ発生するかということです。document.readyの前でしょうか、後でしょうか?
次に、この現象が発生したかどうかを調べるには、ロジックをどのように使用すればよいですか?この現象が発生しないようにしたいわけではなく、単にイベントにフックしたいだけです。できれば、このようなものが望ましいです。
if (autoFilled == true) {
} else {
}
可能であれば、あなたの答えを示すjsfiddleを見たいです。
重複の可能性
ブラウザのオートフィルとJavascriptのトリガーイベント
--これらの質問は両方とも、どのようなイベントが発生したかを実際に説明しておらず、ただテキストボックスを継続的に再チェックしているだけです(パフォーマンスには良くありません!)。
どのように解決するのですか?
問題は、ブラウザによって自動入力の扱いが異なることです。あるものはchangeイベントをディスパッチし、あるものはディスパッチしません。そのため、ブラウザが入力フィールドをオートコンプリートしたときに発生するイベントにフックすることは、ほとんど不可能です。
-
ブラウザごとにイベントトリガーを変更する。
-
ユーザー名/パスワードのフィールドの場合。
- Firefox 4、IE 7、IE 8 では、change イベントがディスパッチされない。
- Safari 5とChrome 9は、changeイベントをディスパッチします。
-
その他のフォームフィールドの場合。
- IE 7 と IE 8 では、change イベントがディスパッチされない。
- Firefox 4 は、ユーザが候補リストから値を選択し、フィールドからタブで抜け出すと、change change イベントをディスパッチします。
- Chrome 9 では、change イベントは発生しません。
- Safari 5は、changeイベントをディスパッチします。
-
最適な方法は、フォームのオートコンプリートを無効にするために
autocomplete="off"
を入力するか、定期的にポーリングを行い、入力されたかどうかを確認します。
document.readyの前に入力されるかどうかというご質問ですが、これもブラウザやバージョンによって異なります。ユーザー名/パスワードのフィールドについては、ユーザー名を選択したときのみ、パスワードのフィールドが埋められます。そのため、どのようなイベントにも添付しようとすると、非常に面倒なコードになります。
こちらをご覧ください。 こちら
関連
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。
-
[解決済み】JavaScriptで「無効な日付」のDateインスタンスを検出する
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] モバイルブラウザの検出
-
[解決済み】未定義のオブジェクトプロパティを検出する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)
-
[解決済み】ETIMEDOUTエラーの対処方法は?
-
[解決済み】 \u003C とは何ですか?
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?