Как узнать на каком скрытом HTML элементе установился фокус?

Question

[Сергей Кореневский]

Уважаемые Гуру дайте пожалуйста совет.
Делаю сайт. Кликаю Табом. Смотрю как фокус двигается. В какой то момент фокуса НЕ видно, и не понятно где он находится. Как узнать в какой текущий момент выбран фокусом HTML элемент?

Answer 1

[nowm]

Обычно ручной поиск сфокусированного элемента не срабатывает, потому что когда ты открываешь консоль разработчика, фокус с элемента слетает. Если снова его фокусируешь при открытой консоли, фокус слетает в тот момент, когда ты переключаешься в уже открытую консоль. Так что, самый подходящий вариант: можно прослушивать события фокуса и сразу печатать в лог, кто этот фокус получил. Должен помочь такой код:

window.addEventListener('focusin', event => console.log(new Date, event.target));

Если он ничего не выводит в момент смены фокуса, значит фокус ушёл за пределы страницы — например, в строку адреса в браузере, на какую-нибудь иконку на панели и так далее.

Comments

[Сергей Кореневский]

Спасибо огромное, отличное решение.
Воспользуюсь, постоянно так делать буду.
Жалко что в дереве ДОМ не понятно где оно находится, с координатами. В смысле нужно будет при каждом скрытом переходе, тыкать мышкой в консоль, искать вложенность и позиции отдельно.
Если бы панель Elements сама бы разворачивалась бы автоматом. Удивительно то что как разработчики Google до этого не додумались. Ведь теперь кажется что это очевидно и само-собой разумеется что эта функция должна быть.

[nowm]

Сергей Кореневский, Тут я посоветовать ничего не могу. Я не знаю просто, как это в Chrome организованно. В Firefox, например, я могу просто правой кнопкой мыши кликнуть по этому элементу в логах и выбрать «Reveal in Inspector» — меня перекидывает во вкладку со схемой DOM, где этот элемент уже сразу выбран.

Кстати, странно: мне пришло письмо, что ответ выбран решением, но он при этом не выбран решением.

[Сергей Кореневский]

nowm, Мне было все равно. Я искал это в Firefox.
Я не могу кликнуть правой кнопкой мышки, потому что элемент скрыт. Элемент в фокусе скрыт.

[nowm]

Сергей Кореневский, я специально писал выше «по этому элементу в логах». Не на странице. В Firefox console.log, когда выводит DOM-элемент, делает это специальным образом, так что (в самой консоли, а не на странице) с этим элементом можно что-то делать. Например, можно по нему кликнуть правой кнопкой мыши. Или можно просто навести на него курсор, и Firefox его подсветит на странице. И так далее.

Вот что я имел ввиду:

[Сергей Кореневский]

nowm, Спасибо. Вы гений. Отлично дали ответ.
Вот тоже самое но это уже расширение браузера
Focused Element

Answer 2

[Сергей Кореневский]

Раширение Google Chrome:
Focused Element
Делает это автоматически в консоль.
После установки включается кликом по значку расширения

Answer 3

[Надим]

document.querySelector('*:focus');

Comments

[Сергей Кореневский]

Если я это напишу в консоли, то в этот момент фокус уже слетит.
Как это увидеть в панелях каких нибудь?

[Надим]

Сергей Кореневский, разумеется нужно использовать задержку:

setTimeout(function() {
    alert("Фокусный элемент:\n" + document.querySelector('*:focus').outerHTML);
}, 10000);

Пока установленные 10 сек. не пройдут, вам нужно успеть установить фокус куда-надо и далее ждать алерта.