Как узнать, какой элемент DOM имеет фокус?

Question

У меня возникла проблема: мне нужно узнать, какой элемент в данный момент имеет фокус в JavaScript. Я просматривал DOM, но не нашел нужной информации. Есть ли способ сделать это, и как?

Причина, по которой я это ищу:

Я пытаюсь сделать так, чтобы клавиши, такие как стрелки и enter, могли перемещаться по таблице элементов ввода. В данный момент клавиша Tab работает, но клавиша Enter и стрелки, похоже, не делают этого по умолчанию. Я уже настроил обработку клавиш, но теперь мне нужно выяснить, как перемещать фокус в функциях обработки событий.

Answer 1

Как уже упоминалось JW, в общем случае невозможно получить текущий фокусный элемент, при этом не завися от браузера. Однако, если ваше приложение предназначено только для Internet Explorer (такие варианты тоже встречаются), вы можете использовать следующий способ:

document.activeElement

Оказывается, что у IE не всё было неправильно, так как это свойство является частью проекта HTML5 и, на данный момент, поддерживается также последними версиями Chrome, Safari и Firefox.

Answer 2

document.activeElement может по умолчанию ссылаться на элемент <body>, если нет элементов, на которые можно установить фокус. Также, если элемент находится в фокусе и окно браузера становится неактивным, activeElement продолжит указывать на этот элемент.

Если одно из этих двух поведений не является желаемым, рассмотрите возможность использования подхода на основе CSS: document.querySelector( ':focus' ).

Answer 3

Я нашел следующий фрагмент кода полезным, когда нужно определить, какой элемент в данный момент имеет фокус. Скопируйте следующий код в консоль вашего браузера, и каждые 1 секунду он будет выводить информацию о текущем элементе с фокусом.

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

Вы можете изменить console.log, чтобы вывести что-то другое, если печать всего элемента не помогает точно определить его.

Answer 4

Вам может понравиться подход, предложенный Джоэлем С., но я также ценю простоту использования document.activeElement. Я воспользовался jQuery и объединил оба метода. Для старых браузеров, которые не поддерживают document.activeElement, используется jQuery.data() для хранения значения 'hasFocus'. Более новые браузеры будут использовать document.activeElement, что, как мне кажется, будет иметь лучшую производительность.

Вот пример кода:

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

В этом коде мы создаем плагин focusTracker, который отслеживает, какой элемент имеет фокус. В современных браузерах он использует document.activeElement, а в старых – метод с использованием data(), что делает его универсальным и эффективным.

Answer 5

Вы можете использовать следующий небольшой помощник для отслеживания фокуса в 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);

С помощью этого кода вы можете проверять, имеет ли элемент фокус, вызывая el.hasFocus(), при условии, что на данном элементе была вызвана функция startFocusTracking().

Как узнать, какой элемент DOM имеет фокус?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных