それ自体でdocument.activeElementは、ドキュメントがフォーカスされていない(したがって、ドキュメント内の何もフォーカスされていない)場合でも要素を返すことができます。
あなたはその振る舞いを望むかもしれませんし、それが問題ではないかもしれません(例えば、keydownイベント内)が、何かが実際にフォーカスされていることを知る必要があるなら、さらにチェックすることができますdocument.hasFocus()。
次の例では、フォーカスされた要素がある場合はそれを提供しますnull。
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
特定の要素にフォーカスがあるかどうかを確認するには、より簡単です。
var input_focused = document.activeElement === input && document.hasFocus();
何かに焦点が当てられているかどうかを確認するために、再び複雑になります。
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
堅牢性注:document.bodyandをチェックするコードでdocument.documentElementは、一部のブラウザーがこれらの1つを返すかnull、何もフォーカスされていない場合にこれが発生します。
<body>(または多分<html>)にtabIndex属性があり、したがって実際にフォーカスできるかどうかは考慮されません。ライブラリなどを作成していて、それを堅牢にしたい場合は、おそらく何らかの方法で処理する必要があります。
これは、(重いエアクォート)フォーカスされた要素を取得する「ワンライナー」バージョンです。これは、短絡について知っている必要があるため、概念的にはより複雑です。読みやすくしたい。
これはお勧めしません。しかし、1337 hax0r、idkの場合は、そこにあります。場合によっては
、|| nullパーツを取り除いてもかまいませんfalse。(あなたはまだ得ることができるnull場合document.activeElementですnull):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
特定の要素がフォーカスされているかどうかを確認するために、代わりにイベントを使用することもできますが、この方法ではセットアップ(および場合によっては破棄)が必要であり、重要なことに、初期状態を想定しています。
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
イベントなしの方法を使用して初期状態の仮定を修正できますが、代わりにそれを使用することもできます。