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

Question

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

Gefragt el 30 de Januar, 2009: Wann wurde die Frage gestellt
785862 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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.

Gefragt el 30 de Januar, 2009 von Tony Peterson

4 Stimmen

Hier ist ein Bookmarklet, das das Element mit dem Fokus in der console.log protokolliert: github.com/lingtalfi/wo-ist-focus-bookmarklet

Kommentiert el 26 de September, 2016 von ling

1 Stimmen

Sie können verwenden find-focused-element Paket: npmjs.com/package/find-focused-element

Kommentiert el 22 de April, 2020 von Maxim Zhukov

1 Stimmen

Bei mir funktioniert das Bookmarklet nicht so, wie ich es erwähnt habe.

Kommentiert el 27 de August, 2020 von GarfieldKlon

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

22voto

Nate Whittaker Punkte 1666

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

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

Beantwortet el 6 de August, 2014 von Nate Whittaker (1666 Punkte )

0 Stimmen

Cool, ja in meinem Fall war Ihr Ansatz absolut sinnvoll. Ich kann meine fokussierbaren Elemente mit 'tabindex="-1"' festlegen, wenn keines von ihnen den Fokus hat (sagen wir, irgendein Text oder Bild, das mir egal ist), gibt document.querySelector( ':focus') null zurück.

Kommentiert el 10 de Kann, 2015 von Manfred

0 Stimmen

Siehe meine Antwort zur Vermeidung der Verwendung von querySelector : stackoverflow.com/a/40873560/2624876

Kommentiert el 29 de November, 2016 von 1j01

Answer 3

15voto

vegemite4me Punkte 6231

Das folgende Snippet hat sich als nützlich erwiesen, wenn man herausfinden will, welches Element gerade den Fokus hat. Kopieren Sie das Folgende in die Konsole Ihres Browsers, und es wird jede Sekunde die Details des aktuellen Elements ausgeben, das den Fokus hat.

setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);

Sie können die console.log um etwas anderes zu protokollieren, das Ihnen hilft, das genaue Element zu finden, wenn das Ausdrucken des gesamten Elements Ihnen nicht hilft, das Element zu finden.

Beantwortet el 20 de Oktober, 2017 von vegemite4me (6231 Punkte )

Answer 4

12voto

Jason Punkte 793

Ich mochte den Ansatz von Joel S., aber ich liebe auch die Einfachheit von document.activeElement . Ich habe jQuery verwendet und die beiden kombiniert. Ältere Browser, die keine Unterstützung für document.activeElement wird verwendet jQuery.data() um den Wert von 'hasFocus' zu speichern. Neuere Browser 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);

Beantwortet el 8 de September, 2010 von Jason (793 Punkte )

3 Stimmen

Könnte dies ersetzt werden durch @William Denniss's $("*:focus") ?

Kommentiert el 30 de Juli, 2015 von Pylinux

0 Stimmen

Ich denke, das ist möglich. Ich habe das schon vor langer Zeit geschrieben und hatte nie einen Grund, eine bessere Lösung zu finden, jetzt, 5 Jahre später, ist es soweit. Probieren Sie es aus! Vielleicht mache ich das Gleiche. I weniger Plugin auf unserer Seite! :)

Kommentiert el 21 de August, 2015 von Jason

Answer 5

12voto

Joel S Punkte 488

Ein kleines Hilfsmittel, das ich für diese Zwecke in Mootools verwendet 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 prüfen, ob das Element den Fokus mit el.hasFocus() vorausgesetzt, dass startFocusTracking() für das angegebene Element aufgerufen wurde.

Beantwortet el 4 de Februar, 2010 von Joel S (488 Punkte )

Answer 6

9voto

DeezCashews Punkte 2152

JQuery unterstützt die :focus Pseudoklasse ab sofort. Wenn Sie in der JQuery-Dokumentation danach suchen, schauen Sie unter "Selectors" nach, wo Sie auf die W3C-CSS-Dokumente . Ich habe mit Chrome, FF und IE 7+ getestet. Beachten Sie, dass für es in IE zu arbeiten, <!DOCTYPE... muss auf der HTML-Seite vorhanden sein. Hier ist ein Beispiel, das davon ausgeht, dass Sie dem Element, das den Fokus hat, eine ID zugewiesen haben:

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

Beantwortet el 11 de Marsch, 2011 von DeezCashews (2152 Punkte )

1 Stimmen

Sie sollten (immer?) die this.id 代わりに $(this).attr('id') oder zumindest (wenn Sie Ihr jQuery-Objekt bereits haben) $(this)[0].id . Natives Javascript auf dieser Ebene ist VIEL schneller und effizienter. Vielleicht nicht spürbar in diesem Fall, aber systemweit werden Sie einen Unterschied bemerken.

Kommentiert el 15 de Dezember, 2015 von Martijn

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

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

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

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: