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

Wenn Sie ein Objekt erhalten möchten, das eine Instanz von Element müssen Sie document.activeElement , aber wenn Sie ein Objekt erhalten wollen, das eine Instanz von Text müssen Sie verwenden document.getSelection().focusNode .

Ich hoffe, das hilft.

Answer 2

Es gibt potenzielle Probleme bei der Verwendung von document.activeElement. Bedenken Sie das:

<div contentEditable="true">
  <div>Some text</div>
  <div>Some text</div>
  <div>Some text</div>
</div>

Wenn der Benutzer den Fokus auf ein inneres DIV legt, verweist document.activeElement weiterhin auf das äußere DIV. Sie können document.activeElement nicht verwenden, um festzustellen, welches der inneren Divs den Fokus hat.

Die folgende Funktion umgeht dies und gibt den fokussierten Knoten zurück:

function active_node(){
  return window.getSelection().anchorNode;
}

Wenn Sie lieber das fokussierte Element erhalten möchten, verwenden Sie:

function active_element(){
  var anchor = window.getSelection().anchorNode;
  if(anchor.nodeType == 3){
        return anchor.parentNode;
  }else if(anchor.nodeType == 1){
        return anchor;
  }
}

Answer 3

Wenn Sie jQuery verwenden, können Sie damit herausfinden, ob ein Element aktiv ist:

$("input#id").is(":active");

Answer 4

Wenn ich andere Antworten lese und es selbst ausprobiere, scheint es document.activeElement liefert Ihnen in den meisten Browsern das gewünschte Element.

Wenn Sie einen Browser haben, der document.activeElement nicht unterstützt, wenn Sie jQuery herum haben, sollten Sie in der Lage sein, es auf allen Fokusereignissen mit etwas sehr einfachem wie diesem zu füllen (ungetestet, da ich keinen Browser habe, der diese Kriterien zur Hand hat):

if (typeof document.activeElement === 'undefined') { // Check browser doesn't do it anyway
  $('*').live('focus', function () { // Attach to all focus events using .live()
    document.activeElement = this; // Set activeElement to the element that has been focussed
  });
}

Answer 5

Ich stelle dies hier nur ein, um die Lösung zu nennen, auf die ich schließlich gekommen bin.

Ich habe eine Eigenschaft namens document.activeInputArea erstellt und das HotKeys-Addon von jQuery verwendet, um Tastaturereignisse für Pfeiltasten, Tabulator und Enter abzufangen, und ich habe einen Event-Handler für das Klicken in Eingabeelemente erstellt.

Dann habe ich den activeInputArea jedes Mal angepasst, wenn sich der Fokus änderte, so dass ich diese Eigenschaft verwenden konnte, um herauszufinden, wo ich mich befand.

Es ist jedoch leicht, dies zu vermasseln, denn wenn ein Fehler im System auftritt und der Fokus nicht dort ist, wo man ihn vermutet, ist es sehr schwer, den korrekten Fokus wiederherzustellen.