Отлавливаем нажатие клавиш на DIV с помощью jQuery

Быстрый ответ

Чтобы отследить нажатия клавиш на элементе div, необходимо назначить этому элементу атрибут tabindex="0" и добавить обработчик события keydown. Так выглядит обычный пример такого кода:

<div id="divKeyTrack" tabindex="0"></div>
<script>
  var divToTrack = document.getElementById('divKeyTrack');
  divToTrack.addEventListener('keydown', function(e) {
    alert('Нажата клавиша: ' + e.key);
  });
  divToTrack.focus(); // Очень важно: нужно установить фокус на элемент, чтобы реагировать на нажатия клавиш
</script>

Теперь элемент div будет реагировать на нажатия клавиш после его активации мышью или программно.

Атрибут tabindex

Для того, чтобы элемент div стал участником последовательности перехода между элементами интерфейса и смог реагировать на нажатия клавиш, примените атрибут tabindex="0":

#divKeyTrack {
  outline: none; /* Отменяем стандартное выделение фокуса */
}

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

jQuery и нажатие клавиш

Если вы предпочитаете jQuery, можете использовать следующий подход к обработке событий нажатия клавиш:

$('#divKeyTrack').on('keydown', function(e) {
  console.log('Была нажата клавиша: ' + e.key);
});

Не забывайте устанавливать фокус на div, применяя метод .focus(). Однако чистый JavaScript может быть более эффективным и не требует подключения дополнительных библиотек.

Как определить нажатую клавишу

Для определения нажатой клавиши в обработчике keydown используйте свойства e.key или e.keyCode. Но на текущий момент использование e.key предпочтительнее, поскольку e.keyCode устарел:

div.addEventListener('keydown', function(e) {
  console.log('Жмут клавишу: ' + e.key); // Например, 'Enter', 'Space', 'ArrowUp' и т.д.
});

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

Стилизация фокусируемого div

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

#divKeyTrack:focus {
  border: 2px solid blue; /* Используем синий цвет для выделения */
}

Визуализация

Можно представить элемент div как фотостудию, где событие keydown — это модель, движения которой вы хотите запечатлеть:

📸  <-- Ваш фотоаппарат (обработчик событий)
🕺  <-- Модель: событие Keydown

div.addEventListener('keydown', function(e) {
    // Положим фотографии на память, наш Keydown!
});

При каждом нажатии клавиши ваш div будет "фотографировать" действие, словно создавая искусство.

Смотрим справа от jQuery!

Иной раз не требуется jQuery. Чистый JavaScript может быть точно также мощным, и он обходится без лишних зависимостей:

document.getElementById('divKeyTrack').addEventListener('keydown', function(e) {
  console.log('Клавиша: ' + e.key); // Выводим на дисплей нажатую клавишу
});

Использование встроенного обработчика событий предоставит вам больше опций по контролю и гибкости вашего кода.

Возможные несоответствия и обработчики клавиатурных событий

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

Чек-лист для профессионалов

1. Программная фокусировка: активируйте фокус на div, только если это действительно необходимо.
2. Доступность: удостоверьтесь, что вы предоставили альтернативные стили фокусировки для удобства пользователей.
3. Распространение событий: знание фаз всплытия и погружения событий может предотвратить будущие проблемы.

Полезные материалы

1. Element: keydown event – Web APIs | MDN — руководство MDN Web Docs по событиям keydown в JavaScript.
2. Keyboard: keydown and keyup – JavaScript.info — подробное руководство по клавиатурным событиям, включая keydown.
3. How To Trigger Button Click on Enter – W3Schools — чёткое пояснение того, как активировать клик кнопки клавишей Enter.
4. javascript – How do I capture a key press (or keydown) event on a div element? – Stack Overflow — решения и дискуссии сообщества Stack Overflow о том, как отслеживать нажатия клавиш на элементе <div>.
5. Bubbling and capturing – JavaScript.info — объяснение механизма распространения событий, что важно при работе с обработчиками.
6. UI Events – W3C — спецификация W3C на события пользовательского интерфейса, включая взаимодействие с клавиатурой.