Wie kann ich herausfinden, welches DOM-Element den Fokus hat?

Question

Ich möchte in JavaScript herausfinden, welches Element gerade den Fokus hat. Ich habe das DOM durchforstet und noch nicht gefunden, was ich brauche. Gibt es eine Möglichkeit, dies zu tun, und wie?

Der Grund, warum ich das gesucht habe:

Ich versuche, Tasten wie die Pfeiltasten und enter durch eine Tabelle mit Eingabeelementen navigieren. Tab funktioniert jetzt, aber Enter und Pfeile nicht standardmäßig scheint es. Ich habe die Tastenhandhabung Teil eingerichtet, aber jetzt muss ich herausfinden, wie man den Fokus über in der Ereignisbehandlung Funktionen zu bewegen.

Answer 1

Verwenden Sie document.activeElement Sie wird von allen gängigen Browsern unterstützt.

Bisher war es nicht möglich, herauszufinden, welches Formularfeld den Fokus hat. Um die Erkennung in älteren Browsern zu emulieren, fügen Sie allen Feldern einen "Fokus"-Ereignishandler hinzu und speichern das zuletzt fokussierte Feld in einer Variablen. Fügen Sie einen "blur"-Handler hinzu, um die Variable bei einem "blur"-Ereignis für das zuletzt fokussierte Feld zu löschen.

Wenn Sie die activeElement können Sie Weichzeichner verwenden; document.activeElement.blur() . Sie wird die activeElement à body .

Verwandte Links:

• activeElement Browser-Kompatibilität
• jQuery-Alternative für document.activeElement

Answer 2

Wie JW schon sagte, können Sie das aktuell fokussierte Element nicht finden, zumindest nicht auf browserunabhängige Weise. Aber wenn Ihre Anwendung nur IE ist (einige sind...), können Sie es auf folgende Weise finden:

document.activeElement

Es sieht so aus, als hätte der IE doch nicht alles falsch gemacht, denn dies ist Teil des HTML5-Entwurfs und scheint zumindest von der neuesten Version von Chrome, Safari und Firefox unterstützt zu werden.

Answer 3

Wenn Sie jQuery verwenden können, unterstützt es jetzt :focus, stellen Sie nur sicher, dass Sie die Version 1.6+ verwenden.

Mit dieser Anweisung erhalten Sie das aktuell fokussierte Element.

$(":focus")

Von: Wie man mit jQuery ein Element auswählt, das den Fokus darauf hat

Answer 4

document.activeElement ist jetzt Teil des HTML5-Arbeitsentwurfs Spezifikation, wird aber möglicherweise noch nicht von einigen nicht-major/mobile/älteren Browsern unterstützt. Sie können zurückgreifen auf querySelector (sofern dies unterstützt wird). Es ist auch erwähnenswert, dass document.activeElement wird zurückgegeben document.body wenn kein Element fokussiert ist - auch wenn das Browserfenster keinen Fokus hat.

Der folgende Code umgeht dieses Problem und kehrt zu querySelector ein wenig besser unterstützen.

var focused = document.activeElement;
if (!focused || focused == document.body)
    focused = null;
else if (document.querySelector)
    focused = document.querySelector(":focus");

Außerdem ist der Leistungsunterschied zwischen diesen beiden Methoden zu beachten. Die Abfrage des Dokuments mit Selektoren wird immer viel langsamer sein als der Zugriff auf die activeElement Eigentum. Siehe dies jsperf.com Test .

Answer 5

Von selbst, document.activeElement kann immer noch ein Element zurückgeben, wenn das Dokument nicht fokussiert ist (und somit nichts in dem Dokument ist konzentriert!)

Sie puede dieses Verhalten wollen, oder es puede keine Rolle (z.B. innerhalb einer keydown Ereignis), aber wenn Sie wissen müssen, dass etwas tatsächlich fokussiert ist, können Sie zusätzlich prüfen document.hasFocus() .

Das folgende Beispiel zeigt das fokussierte Element an, wenn es eines gibt, oder aber null .

var focused_element = null;
if (
    document.hasFocus() &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement
) {
    focused_element = document.activeElement;
}

Um zu prüfen, ob ein spezifisch Element den Fokus hat, ist es einfacher:

var input_focused = document.activeElement === input && document.hasFocus();

Um zu prüfen, ob alles fokussiert ist, ist es wieder komplexer:

var anything_is_focused = (
    document.hasFocus() &&
    document.activeElement !== null &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement
);

---

Anmerkung zur Robustheit : In dem Code, in dem es die Prüfungen gegen document.body y document.documentElement Dies liegt daran, dass einige Browser eines dieser Symbole zurückgeben oder null wenn nichts im Mittelpunkt steht.

Es wird nicht berücksichtigt, ob die <body> (oder vielleicht <html> ) hatte eine tabIndex Attribut und damit könnte tatsächlich konzentriert werden . Wenn Sie eine Bibliothek oder etwas anderes schreiben und wollen, dass es robust ist, sollten Sie das wahrscheinlich irgendwie handhaben.

---

Hier ist ein ( schwer airquotes) "Einzeiler"-Version, um das fokussierte Element zu erhalten, das ist konzeptionell komplizierter denn man muss über Kurzschlüsse Bescheid wissen, und das passt natürlich nicht in eine Zeile, vorausgesetzt, man will, dass es lesbar ist.
Ich werde dieses Buch nicht empfehlen. Aber wenn du ein 1337 hax0r bist, idk... es ist da.
Sie könnten auch die || null Teil, wenn es Ihnen nichts ausmacht, sich false in einigen Fällen. (Sie können immer noch null wenn document.activeElement es null ) :

var focused_element = (
    document.hasFocus() &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement &&
    document.activeElement
) || null;

---

Um zu prüfen, ob ein bestimmtes Element fokussiert ist, können Sie alternativ pourrait Ereignisse zu verwenden, aber dieser Weg erfordert die Einrichtung (und möglicherweise den Abbau), und das ist wichtig, einen Ausgangszustand annimmt :

var input_focused = false;
input.addEventListener("focus", function() {
    input_focused = true;
});
input.addEventListener("blur", function() {
    input_focused = false;
});

Sie könnten die Annahme des Anfangszustands durch die Verwendung des ereignislosen Weges beheben, aber dann könnten Sie stattdessen auch einfach das verwenden.