В веб-разработке часто встречаются элементы, требующие взаимодействия с пользователем, например поля ввода, кнопки или раскрывающиеся меню. Иногда вам может потребоваться определить, находится ли в данный момент в фокусе определенный элемент при нажатии клавиши. В этой статье мы рассмотрим различные методы достижения этой цели с помощью JavaScript. Итак, давайте углубимся и узнаем, как это сделать!

Метод 1: использование свойства document.activeElement
Самый простой способ проверить, сфокусирован ли элемент при нажатой клавише, — использовать свойство document.activeElement. Это свойство возвращает элемент на странице, на котором в данный момент находится фокус. Прикрепив прослушиватель событий к событию keydownили keypress, вы можете проверить, соответствует ли активный элемент интересующему вас элементу. Вот пример фрагмента кода:

document.addEventListener('keydown', function(event) {
  if (event.target === document.activeElement) {
    // The focused element matches the target element
    console.log('Element is focused with a key press!');
  }
});

Метод 2. Проверка свойства event.target.
Другой подход заключается в непосредственной проверке свойства event.targetвнутри обработчика событий нажатия клавиши. Это свойство представляет элемент, вызвавший событие. Если event.targetсоответствует желаемому элементу, это означает, что этот элемент в данный момент находится в фокусе. Вот пример:

var targetElement = document.getElementById('myElement');
document.addEventListener('keydown', function(event) {
  if (event.target === targetElement) {
    // The focused element matches the target element
    console.log('Element is focused with a key press!');
  }
});

Метод 3: использование псевдокласса CSS :focus
Если вы предпочитаете решение на основе CSS, вы можете использовать псевдокласс :focusдля стилизации элемента, находящегося в фокусе. Затем с помощью JavaScript вы можете проверить, имеет ли элемент желаемый стиль, связанный с фокусом. Вот фрагмент кода, иллюстрирующий этот метод:

var targetElement = document.getElementById('myElement');
document.addEventListener('keydown', function(event) {
  if (window.getComputedStyle(targetElement, null).getPropertyValue('outline-style') === 'dotted') {
    // The element is focused with a key press
    console.log('Element is focused with a key press!');
  }
});

В этой статье мы рассмотрели три различных метода проверки фокуса элемента при нажатии клавиши. Используя свойство document.activeElement, проверяя свойство event.targetили используя псевдокласс CSS :focus, вы можете легко определить, имеет ли конкретный элемент внимание пользователя во время нажатия клавиши. Выберите метод, соответствующий вашим требованиям, и наслаждайтесь повышенной интерактивностью своих веб-страниц!