An sich document.activeElementkann immer noch ein Element zurück , wenn das Dokument nicht fokussiert ist (und damit nichts mehr im Dokument konzentriert sich!)
Sie können dieses Verhalten wollen, oder es kann nicht Sache (zB innerhalb eines keydownEreignisses), aber wenn Sie etwas wissen müssen , ist tatsächlich konzentriert, können Sie zusätzlich prüfen document.hasFocus().
Das Folgende gibt Ihnen das fokussierte Element, falls es eines gibt, oder sonst null.
var focused_element = null;
if (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
) {
focused_element = document.activeElement;
}
Um zu überprüfen, ob ein bestimmtes Element den Fokus hat, ist es einfacher:
var input_focused = document.activeElement === input && document.hasFocus();
Um zu überprüfen, ob etwas fokussiert ist, ist es wieder komplexer:
var anything_is_focused = (
document.hasFocus() &&
document.activeElement !== null &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement
);
Hinweis zur Robustheit : In dem Code, in dem gegen document.bodyund geprüft wird document.documentElement, liegt dies daran, dass einige Browser einen dieser Codes zurückgeben oder nullwenn nichts fokussiert ist.
Es wird nicht berücksichtigt, ob das <body>(oder vielleicht <html>) ein tabIndexAttribut hatte und somit tatsächlich fokussiert werden könnte . Wenn Sie eine Bibliothek oder etwas anderes schreiben und möchten, dass es robust ist, sollten Sie das wahrscheinlich irgendwie handhaben.
Hier ist eine ( schwere Airquotes) "Einzeiler" -Version des Erhaltens des fokussierten Elements, die konzeptionell komplizierter ist, weil Sie über Kurzschlüsse Bescheid wissen müssen, und Sie wissen, dass es offensichtlich nicht in eine Zeile passt, vorausgesetzt, Sie möchte, dass es lesbar ist.
Ich werde diesen nicht empfehlen. Aber wenn Sie ein 1337 hax0r sind, Idk ... ist es da.
Sie können das || nullTeil auch entfernen, wenn Sie falsein einigen Fällen nichts dagegen haben. (Sie könnten immer noch bekommen, nullwenn es document.activeElementist null):
var focused_element = (
document.hasFocus() &&
document.activeElement !== document.body &&
document.activeElement !== document.documentElement &&
document.activeElement
) || null;
Wenn ein bestimmtes Element zur Überprüfung fokussiert ist, alternativ Sie können Ereignisse verwenden, aber auf diese Weise erfordert Setup (und möglicherweise Teardown) und wichtiger ist , übernimmt ein Anfangszustand :
var input_focused = false;
input.addEventListener("focus", function() {
input_focused = true;
});
input.addEventListener("blur", function() {
input_focused = false;
});
Sie können die Annahme des Anfangszustands auf nicht ereignisgesteuerte Weise korrigieren, aber Sie können dies auch verwenden.