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

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

Причина, по которой я искал это:

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

Используйте document.activeElement, это поддерживается во всех основных браузерах.

Ранее, если вы пытались выяснить, какое поле формы имеет фокус, вы не могли этого сделать. Чтобы эмулировать обнаружение в старых браузерах, добавьте обработчик события «focus» ко всем полям и запишите последнее сфокусированное поле в переменной. Добавьте обработчик «размытия», чтобы очистить переменную после события размытия для последнего сфокусированного поля.

Если вам нужно удалить, activeElementвы можете использовать размытие; document.activeElement.blur(), Это изменит activeElementTo body.

Ссылки по теме:

• Совместимость браузера activeElement
• Альтернатива jQuery для document.activeElement

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

document.activeElement

РЕДАКТИРОВАТЬ: Похоже, что IE не все не так, в конце концов, это часть проекта HTML5 и, кажется, поддерживается по крайней мере последней версии Chrome, Safari и Firefox.

Если вы можете использовать jQuery, он теперь поддерживает: focus, просто убедитесь, что вы используете версию 1.6+.

Это утверждение даст вам в настоящее время сосредоточенный элемент.

$(":focus")

От: Как выбрать элемент, который фокусируется на нем, с помощью jQuery

document.activeElementв настоящее время является частью спецификации рабочего проекта HTML5 , но она может еще не поддерживаться в некоторых не основных / мобильных / старых браузерах. Вы можете вернуться к querySelector(если это поддерживается). Также стоит упомянуть, что document.activeElementон вернется, document.bodyесли ни один элемент не сфокусирован, даже если окно браузера не имеет фокуса.

Следующий код поможет обойти эту проблему и querySelectorпредоставит немного лучшую поддержку.

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

Кроме того, следует отметить разницу в производительности между этими двумя методами. Запрос к документу с помощью селекторов всегда будет намного медленнее, чем доступ к activeElementсвойству. Смотрите этот тест jsperf.com .

Сам по себе document.activeElementможет возвращать элемент, если документ не сфокусирован (и, следовательно, ничто в документе не сфокусировано!)

Вы можете хотеть такого поведения, или оно может не иметь значения (например, в рамках keydownсобытия), но если вам нужно знать, что что-то действительно сфокусировано, вы можете дополнительно проверить document.hasFocus().

Следующее даст вам сфокусированный элемент, если он есть, или еще null.

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

Чтобы проверить, имеет ли конкретный элемент фокус, проще:

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

Чтобы проверить, сфокусировано ли что-нибудь , еще раз сложнее:

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

Примечание о надежности : в коде, в котором выполняется проверка, document.bodyи document.documentElementэто происходит потому, что некоторые браузеры возвращают один из них или nullкогда ничего не сфокусировано.

Он не учитывает, имел ли <body>(или может быть <html>) tabIndexатрибут и, таким образом, мог бы быть сфокусирован . Если вы пишете библиотеку или что-то еще и хотите, чтобы она была надежной, вам, вероятно, следует как-то с этим справиться.

Вот ( тяжелые воздушные кавычки) «однострочная» версия получения сфокусированного элемента, концептуально более сложная, потому что вы должны знать о коротком замыкании, и вы знаете, что он явно не помещается в одну строку, если вы хочу, чтобы это было читабельно.
Я не буду рекомендовать это. Но если вы 1337 hax0r, idk ... это там.
Вы также можете удалить || nullчасть, если вы не против получить falseв некоторых случаях. (Вы все еще можете получить, nullесли document.activeElementесть null):

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

Для проверки того, что конкретный элемент сфокусирован, вы также можете использовать события, но этот способ требует настройки (и, возможно, демонтажа), и, что важно, предполагает исходное состояние :

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

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

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

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

Мне понравился подход, используемый Joel S, но я также люблю простоту document.activeElement. Я использовал jQuery и объединил их. Старые браузеры, которые не поддерживают, document.activeElementбудут использовать jQuery.data()для хранения значения hasFocus. Новые браузеры будут использовать document.activeElement. Я предполагаю, что 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);

Маленький помощник, который я использовал для этих целей в 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()он был вызван для данного элемента.

JQuery поддерживает :focusпсевдокласс на текущий момент. Если вы ищете его в документации JQuery, отметьте в разделе «Селекторы», где он указывает на документацию CSS W3C . Я тестировал с Chrome, FF и IE 7+. Обратите внимание, что для того, чтобы он работал в IE, <!DOCTYPE...должен существовать на странице HTML. Вот пример, предполагающий, что вы присвоили идентификатор элементу, который имеет фокус:

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

Если вы хотите получить объект, который является экземпляром Element, вы должны использовать document.activeElement, но если вы хотите получить объект, который является экземпляром Text, вы должны использовать document.getSelection().focusNode.

Надеюсь поможет.

Есть потенциальные проблемы с использованием document.activeElement. Рассматривать:

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

Если пользователь фокусируется на внутреннем div, то document.activeElement все еще ссылается на внешний div. Вы не можете использовать document.activeElement, чтобы определить, какой из внутренних элементов имеет фокус.

Следующая функция обходит это и возвращает сфокусированный узел:

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

Если вы предпочитаете получить сфокусированный элемент, используйте:

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

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

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

Не стесняйтесь изменять, console.logчтобы выйти из системы, чтобы помочь вам точно определить точный элемент, если распечатка всего элемента не поможет вам точно определить элемент.

Читая другие ответы и пробуя себя, кажется document.activeElement, вы получите элемент, который вам нужен в большинстве браузеров.

Если у вас есть браузер, который не поддерживает document.activeElement, если у вас есть jQuery, вы сможете заполнить его на всех событиях фокуса чем-то очень простым, как это (не проверено, поскольку у меня нет браузера, соответствующего этим критериям) ):

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

Если вы используете jQuery, вы можете использовать это, чтобы узнать, активен ли элемент:

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

С dojo вы можете использовать dijit.getFocus ()

Просто поместите это здесь, чтобы дать решение, которое я в конечном итоге придумала.

Я создал свойство под названием document.activeInputArea и использовал дополнение HotKeys для jQuery, чтобы перехватывать события клавиатуры для клавиш со стрелками, табуляции и ввода, и я создал обработчик событий для нажатия на элементы ввода.

Затем я настраивал activeInputArea при каждом изменении фокуса, чтобы я мог использовать это свойство, чтобы узнать, где я был.

Хотя это легко испортить, потому что если у вас есть ошибка в системе, а фокус не там, где вы думаете, то восстановить правильную фокусировку очень сложно.