それ自体で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.body
andをチェックするコードで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;
});
イベントなしの方法を使用して初期状態の仮定を修正できますが、代わりにそれを使用することもできます。