Frage Wie finde ich heraus, welches DOM-Element den Fokus hat?


Ich möchte in Javascript herausfinden, welches Element gerade den Fokus hat. Ich habe durch das DOM geschaut und habe noch nicht gefunden, was ich brauche. Gibt es einen Weg dies zu tun, und wie?

Der Grund, warum ich das suchte:

Ich versuche Schlüssel wie die Pfeile und zu machen enter Navigieren Sie durch eine Tabelle von Eingabeelementen. Tab funktioniert jetzt, aber Enter und Pfeile nicht standardmäßig scheint es. Ich habe den Key-Handling-Teil eingerichtet, aber jetzt muss ich herausfinden, wie man den Fokus in den Event-Handling-Funktionen verschiebt.


1038
2018-01-30 20:21


Ursprung


Antworten:


Benutzen document.activeElementEs wird in allen gängigen Browsern unterstützt.

Wenn Sie zuvor herausgefunden haben, welches Formularfeld den Fokus hat, konnten Sie dies nicht tun. Um die Erkennung in älteren Browsern zu emulieren, fügen Sie allen Feldern einen Ereignishandler "focus" hinzu und zeichnen Sie das zuletzt fokussierte Feld in einer Variablen auf. Fügen Sie einen "Unschärfe" -Handler hinzu, um die Variable bei einem Blur-Ereignis für das zuletzt fokussierte Feld zu löschen.

Verwandte Links:


1222
2018-01-30 20:34



Wie von JW gesagt, können Sie das aktuell fokussierte Element nicht browserunabhängig finden. Aber wenn Ihre App nur IE ist (einige sind ...), können Sie es folgendermaßen finden:

document.activeElement

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


106
2017-08-27 17:33



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

Mit dieser Anweisung erhalten Sie das aktuell fokussierte Element.

$(":focus")

Von: So wählen Sie ein Element aus, das mit jQuery darauf fokussiert ist


77
2017-10-19 13:01



document.activeElement ist jetzt Teil des HTML5-Arbeitsentwurfs Spezifikation, aber es wird möglicherweise noch nicht in einigen nicht wichtigen / mobilen / älteren Browsern unterstützt. Du kannst zurückfallen zu querySelector (wenn das unterstützt wird). Es ist auch erwähnenswert, dass document.activeElement wird zurückkehren document.body wenn kein Element fokussiert ist - auch wenn das Browserfenster keinen Fokus hat.

Der folgende Code wird dieses Problem umgehen und auf es zurückgreifen querySelector etwas bessere Unterstützung geben.

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

Eine zusätzliche Sache zu beachten ist der Leistungsunterschied zwischen diesen beiden Methoden. Das Abfragen des Dokuments mit Selektoren ist immer viel langsamer als der Zugriff auf das activeElement Eigentum. Sieh dir das an jsperf.com Test.


39
2017-08-06 19:32



document.activeElement kann standardmäßig auf die <body> Element, wenn keine fokussierbaren Elemente im Fokus sind. Wenn ein Element fokussiert ist und das Browserfenster unscharf ist, activeElement wird weiterhin das fokussierte Element halten.

Wenn eines dieser beiden Verhaltensweisen nicht erwünscht ist, ziehen Sie einen CSS-basierten Ansatz in Betracht: document.querySelector( ':focus' ).


13
2017-11-29 18:51



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

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

Im Folgenden erhalten Sie das fokussierte Element, wenn eines vorhanden ist 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 a Spezifisch Element hat den Fokus, es ist einfacher:

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

Um zu überprüfen, ob etwas ist fokussiert, es ist wieder komplexer:

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

Robustheit Hinweis: In dem Code, wo es die prüft gegen document.body und document.documentElementDies liegt daran, dass einige Browser einen dieser oder zurückgeben null wenn nichts fokussiert ist.

Es ist nicht berücksichtigt, wenn die <body> (oder vielleicht <html>) hatte a tabIndex Attribut und so könnte eigentlich konzentriert sein. Wenn Sie eine Bibliothek oder etwas schreiben und es robust sein wollen, sollten Sie das wahrscheinlich irgendwie handhaben.


Hier ist ein (schwer Airquotes) "One-Liner" -Version des Erhaltens des fokussierten Elements, das ist konzeptionell komplizierter weil man über Kurzschlüsse Bescheid wissen muss, und dass es offensichtlich nicht in eine Zeile passt, vorausgesetzt, man möchte, dass es lesbar ist.
Ich werde das hier nicht empfehlen. Aber wenn du ein 1337 hax0r bist, IDK ... ist es da.
Sie könnten auch das entfernen || null Teil, wenn es dir nichts ausmacht false in manchen Fällen. (Du könntest immer noch kommen null ob document.activeElement ist 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, alternativ Sie könnte Verwenden Sie Ereignisse, aber dieser Weg erfordert Setup (und möglicherweise Teardown) und vor allem, nimmt einen Ausgangszustand an:

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 mit der nicht-ausgeglichenen Methode korrigieren, aber dann können Sie stattdessen auch diese verwenden.


12
2017-09-08 18:47



Ich mochte den Ansatz von Joel S, aber ich liebe auch die Einfachheit von document.activeElement. Ich benutzte jQuery und kombinierte die zwei. Ältere Browser, die dies nicht unterstützen document.activeElement wird benutzen jQuery.data() um den Wert von 'hasFocus' zu speichern. Neuere Browser werden verwenden document.activeElement. ich nehme an, dass document.activeElement wird eine bessere Leistung haben.

(function($) {
var settings;
$.fn.focusTracker = function(options) {
    settings = $.extend({}, $.focusTracker.defaults, options);

    if (!document.activeElement) {
        this.each(function() {
            var $this = $(this).data('hasFocus', false);

            $this.focus(function(event) {
                $this.data('hasFocus', true);
            });
            $this.blur(function(event) {
                $this.data('hasFocus', false);
            });
        });
    }
    return this;
};

$.fn.hasFocus = function() {
    if (this.length === 0) { return false; }
    if (document.activeElement) {
        return this.get(0) === document.activeElement;
    }
    return this.data('hasFocus');
};

$.focusTracker = {
    defaults: {
        context: 'body'
    },
    focusedElement: function(context) {
        var focused;
        if (!context) { context = settings.context; }
        if (document.activeElement) {
            if ($(document.activeElement).closest(context).length > 0) {
                focused = document.activeElement;
            }
        } else {
            $(':visible:enabled', context).each(function() {
                if ($(this).data('hasFocus')) {
                    focused = this;
                    return false;
                }
            });
        }
        return $(focused);
    }
};
})(jQuery);

10
2018-02-04 12:36



Ein kleiner Helfer, den ich für diese Zwecke in Mootools benutzt habe:

FocusTracker = {
    startFocusTracking: function() {
       this.store('hasFocus', false);
       this.addEvent('focus', function() { this.store('hasFocus', true); });
       this.addEvent('blur', function() { this.store('hasFocus', false); });
    },

    hasFocus: function() {
       return this.retrieve('hasFocus');
    }
}

Element.implement(FocusTracker);

Auf diese Weise können Sie überprüfen, ob das Element den Fokus hat el.hasFocus() unter der Vorraussetzung, dass startFocusTracking() wurde auf dem gegebenen Element aufgerufen.


9
2018-03-10 23:10



JQuery unterstützt die :focus Pseudo-Klasse wie aktuell. Wenn Sie in der JQuery-Dokumentation danach suchen, überprüfen Sie unter "Selektoren", wo es Sie auf die verweist W3C CSS Dokumente. Ich habe mit Chrome, FF und IE 7+ getestet. Beachten Sie, dass es in IE funktioniert, <!DOCTYPE... muss auf der HTML-Seite existieren. Angenommen, Sie haben dem Element mit dem Fokus eine ID zugewiesen:

$(":focus").each(function() {
  alert($(this).attr("id") + " has focus!");
});

7
2017-07-17 05:52



Wenn Sie ein Objekt erhalten möchten, das eine Instanz von ist Element, Sie müssen verwenden document.activeElement, aber wenn Sie ein Objekt erhalten möchten, das eine Instanz von ist TextDu musst es benutzen document.getSelection().focusNode.

Ich hoffe, hilft.


7
2018-03-01 07:36