Jak dowiedzieć się, który element DOM ma fokus?

Chciałbym dowiedzieć się, w JavaScript, który element jest obecnie aktywny. Przeglądałem DOM i nie znalazłem jeszcze tego, czego potrzebuję. Czy jest na to sposób i jak to zrobić?

Powodem, dla którego tego szukałem:

Staram się tworzyć klucze takie jak strzałki i enternawigować w tabeli elementów wejściowych. Tab działa teraz, ale Enter, a strzałki domyślnie nie wydają się. Mam skonfigurowaną część do obsługi klucza, ale teraz muszę wymyślić, jak przenieść fokus w funkcjach obsługi zdarzeń.

Użyj document.activeElement, jest obsługiwany we wszystkich głównych przeglądarkach.

Poprzednio, jeśli próbowałeś dowiedzieć się, na czym skupia się pole formularza, nie mogłeś. Aby emulować wykrywanie w starszych przeglądarkach, dodaj moduł obsługi zdarzeń „focus” do wszystkich pól i zapisz pole, na którym ostatnio ustawiono ostrość, w zmiennej. Dodaj moduł obsługi „rozmycia”, aby wyczyścić zmienną po zdarzeniu rozmycia dla pola, na którym ostatnio ustawiono ostrość.

Jeśli chcesz usunąć activeElement, możesz użyć rozmycia; document.activeElement.blur(). Zmieni to activeElementna body.

Powiązane linki:

• Kompatybilność z activeElement Browser
• jQuery alternatywa dla document.activeElement

Jak powiedział JW, nie można znaleźć bieżącego elementu skupionego, przynajmniej w sposób niezależny od przeglądarki. Ale jeśli twoja aplikacja jest tylko IE (niektóre są ...), możesz ją znaleźć w następujący sposób:

document.activeElement

EDYCJA: Wygląda na to, że IE nie miał przecież wszystkiego źle, jest to część szkicu HTML5 i wydaje się być obsługiwane przez najnowszą wersję Chrome, Safari i Firefox.

Jeśli możesz korzystać z jQuery, obsługuje teraz: focus, upewnij się, że używasz wersji 1.6+.

To oświadczenie zapewni ci aktualnie skoncentrowany element.

$(":focus")

Od: Jak wybrać element, który skupia się na nim za pomocą jQuery

document.activeElementjest teraz częścią specyfikacji roboczej wersji HTML5 , ale może nie być jeszcze obsługiwany w niektórych przeglądarkach innych niż główne / mobilne / starsze. Możesz wrócić do querySelector(jeśli jest to obsługiwane). Warto również wspomnieć, że document.activeElementzwróci się, document.bodyjeśli żaden element nie jest skoncentrowany - nawet jeśli okno przeglądarki nie ma fokusa.

Poniższy kod obejmie ten problem i wróci do querySelectornieco lepszego wsparcia.

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

Dodatkową rzeczą, na którą należy zwrócić uwagę, jest różnica w wydajności między tymi dwiema metodami. Zapytanie o dokument za pomocą selektorów zawsze będzie znacznie wolniejsze niż uzyskiwanie dostępu doactiveElement właściwości. Zobacz ten test jsperf.com .

Sam w sobie document.activeElementmoże nadal zwracać element, jeśli dokument nie jest skoncentrowany (a zatem nic w dokumencie jest skoncentrowane!)

Państwo może chcieć to zachowanie, albo może nie materia (np w keydownprzypadku), ale jeśli chcesz wiedzieć coś jest rzeczywiście koncentruje można dodatkowo sprawdzićdocument.hasFocus() .

Poniższe informacje przedstawiają element skupiony, jeśli taki istnieje, lub inny element null.

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

Aby sprawdzić, czy specyficzny element ma ostrość, to prostsze:

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

Aby sprawdzić, czy coś jest skoncentrowane, jest to znowu bardziej złożone:

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

Uwaga na temat niezawodności : w kodzie, w którym sprawdza on, document.bodyoraz document.documentElementdlatego, że niektóre przeglądarki zwracają jedną z nich lub nullgdy nic nie jest skoncentrowane.

Nie bierze pod uwagę, czy <body>(a może <html>) miał tabIndexatrybut, a zatem mógł się skupić . Jeśli piszesz bibliotekę lub coś i chcesz, aby była solidna, prawdopodobnie powinieneś jakoś sobie z tym poradzić.

Oto ( jednokierunkowa) wersja ( ciężkie cytaty) uzyskiwania skupionego elementu, która jest koncepcyjnie bardziej skomplikowana, ponieważ musisz wiedzieć o zwarciach, a wiesz, oczywiście, że nie pasuje do jednej linii, zakładając, że chcę, żeby było czytelne.
Nie polecę tego. Ale jeśli masz 1337 hax0r, idk ... to tam jest.
Możesz również usunąć tę || nullczęść, jeśli falsew niektórych przypadkach nie masz nic przeciwko . (Możesz nadal uzyskać, nulljeśli document.activeElementjest null):

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

Do sprawdzania, czy element specyficzny koncentruje alternatywnie Państwo mogli użyć zdarzenia, ale w ten sposób wymaga konfiguracji (i potencjalnie porzuca), i co najważniejsze, zakłada stan początkowy :

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

Możesz naprawić założenie stanu początkowego, używając nie-zdarzeń, ale równie dobrze możesz po prostu użyć tego zamiast.

document.activeElementmoże przyjmować wartość domyślną dla <body>elementu, jeśli nie są aktywne żadne elementy, na które można ustawić ostrość. Dodatkowo, jeśli element jest skupiony, a okno przeglądarki jest rozmyte,activeElement nadal będzie utrzymywał skupiony element.

Jeśli któryś z tych dwóch zachowań nie są pożądane, należy rozważyć podejście oparte na CSS: document.querySelector( ':focus' ).

Podobało mi się podejście zastosowane przez Joela S., ale lubię też prostotę document.activeElement. Użyłem jQuery i połączyłem oba. Starsze przeglądarki, które nie obsługują, document.activeElementbędą używać jQuery.data()do przechowywania wartości „hasFocus”. Będą używane nowsze przeglądarki document.activeElement. Zakładam, że document.activeElementbędzie miał lepszą wydajność.

(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);

Mały pomocnik, którego użyłem do tych celów w Mootools:

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);

W ten sposób możesz sprawdzić, czy element ma fokus el.hasFocus()pod warunkiem, że startFocusTracking()został wywołany na danym elemencie.

JQuery obsługuje obecnie :focuspseudoklasę. Jeśli szukasz tego w dokumentacji JQuery, sprawdź w „Selektorach”, gdzie prowadzi do dokumentów W3C CSS . Testowałem z Chrome, FF i IE 7+. Pamiętaj, że aby działał w IE, <!DOCTYPE...musi istnieć na stronie HTML. Oto przykład, zakładając, że przypisałeś identyfikator do elementu, który ma fokus:

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

Jeśli chcesz uzyskać obiekt, który jest instancją Element, musisz użyć document.activeElement, ale jeśli chcesz uzyskać obiekt, który jest instancją Text, musisz użyć document.getSelection().focusNode.

Mam nadzieję, że pomoże.

Istnieją potencjalne problemy z użyciem document.activeElement. Rozważać:

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

Jeśli użytkownik skupia się na wewnętrznej div, wtedy document.activeElement nadal odwołuje się do zewnętrznej div. Nie możesz użyć document.activeElement, aby określić, który z wewnętrznych div ma fokus.

Obejdzie to następująca funkcja i zwróci skoncentrowany węzeł:

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

Jeśli wolisz uzyskać element skupiony, użyj:

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

Uważam, że następujący fragment kodu jest przydatny podczas próby ustalenia, który element jest aktualnie aktywny. Skopiuj następujące elementy do konsoli przeglądarki, a co sekundę będą drukować szczegóły bieżącego elementu, który ma fokus.

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

Zmodyfikuj, console.logaby wylogować się z czegoś innego, co pomoże ci dokładnie określić element, jeśli wydrukowanie całego elementu nie pomoże w ustaleniu elementu.

Czytanie innych odpowiedzi i samodzielne wypróbowanie document.activeElementdaje ci element, którego potrzebujesz w większości przeglądarek.

Jeśli masz przeglądarkę, która nie obsługuje document.activeElement, jeśli masz jQuery w pobliżu, powinieneś być w stanie wypełnić ją wszystkimi zdarzeniami fokusowymi czymś bardzo prostym, takim jak to (niesprawdzone, ponieważ nie mam przeglądarki spełniającej te kryteria ):

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
  });
}

Jeśli używasz jQuery, możesz użyć tego, aby dowiedzieć się, czy element jest aktywny:

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

W dojo możesz użyć dijit.getFocus ()

Po prostu umieszczam to tutaj, aby dać rozwiązanie, które w końcu wymyśliłem.

Utworzyłem właściwość o nazwie document.activeInputArea i użyłem dodatku HotKeys jQuery'ego do przechwytywania zdarzeń klawiatury dla klawiszy strzałek, tab i enter, i utworzyłem moduł obsługi zdarzeń do klikania w elementy wejściowe.

Następnie dostosowywałem activeInputArea przy każdej zmianie fokusa, dzięki czemu mogłem użyć tej właściwości, aby dowiedzieć się, gdzie jestem.

Łatwo to jednak zepsuć, ponieważ jeśli masz błąd w systemie i fokus nie jest tam, gdzie myślisz, że jest, to bardzo trudno jest przywrócić prawidłowe fokus.