События клавиатуры

keydown — клавиша нажата. keyup — клавиша отпущена. event.key — символ ('a', 'Enter', 'ArrowDown'). event.code — физическая клавиша ('KeyA', 'Enter', 'ArrowDown'). modifierKey — ctrlKey, shiftKey, altKey, metaKey (boolean). keypress — deprecated, не используйте.

Два основных события:

• keydown — при нажатии (срабатывает повторно при удержании)
• keyup — при отпускании (один раз)

event.key vs event.code:

key — что за символ:

• 'a' — буква a
• 'Enter' — Enter
• 'ArrowDown' — стрелка вниз
• 'Shift' — Shift

code — какая физическая клавиша:

• 'KeyA' — клавиша A
• 'Enter' — Enter
• 'ShiftLeft' — левый Shift

Зачем различать:

• Пользователь нажал 'a' на русской раскладке → key = 'ф', code = 'KeyA'
• Для горячих клавиш используйте code
• Для ввода текста используйте key

Модификаторы:

element.addEventListener('keydown', (e) => { if (e.ctrlKey && e.key === 's') { e.preventDefault(); console.log('Ctrl+S!'); } if (e.shiftKey && e.key === 'Enter') { console.log('Shift+Enter!'); } });

Поля модификаторов:

• e.ctrlKey — Ctrl (или Command на Mac, если metaKey)
• e.shiftKey — Shift
• e.altKey — Alt
• e.metaKey — Command (Mac) / Windows key

Связь с accessibility:

• Все интерактивные элементы должны быть доступны с клавиатуры
• tabindex="0" — элемент доступен с Tab
• focus() — программная фокусировка
• blur() — снятие фокуса

Клавиатура — как телеграф. keydown — кнопка нажата (сигнал отправлен). keyup — кнопка отпущена (сигнал завершён). event.key — что написано на кнопке ('A', 'Enter'). event.code — где кнопка на клавиатуре (левая, правая, верхняя). Модификаторы — как зажать шифр (Shift) перед отправкой.

**Самый простой:**

document.addEventListener('keydown', (e) => {
  console.log('Клавиша:', e.key);
  console.log('Код:', e.code);
});
// Нажали A: key='a', code='KeyA'
// Нажали Enter: key='Enter', code='Enter'

Базовый вывод: key и code при нажатии клавиш.

**Простой:**

const input = document.querySelector('#search');

input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('Поиск:', input.value);
  }
  if (e.key === 'Escape') {
    input.value = '';
    input.blur();
  }
});

Обработка Enter для поиска и Escape для очистки.

**Реальный пример:**

// Горячие клавиши
document.addEventListener('keydown', (e) => {
  // Ctrl+S — сохранить
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }

  // Ctrl+Z — отменить
  if (e.ctrlKey && e.key === 'z') {
    e.preventDefault();
    undo();
  }

  // Ctrl+Shift+P — настройки
  if (e.ctrlKey && e.shiftKey && e.key === 'P') {
    e.preventDefault();
    openSettings();
  }
});

// Доступность: навигация стрелками
const list = document.querySelector('.menu');
list.addEventListener('keydown', (e) => {
  const items = [...list.querySelectorAll('[role="menuitem"]')];
  const index = items.indexOf(document.activeElement);

  if (e.key === 'ArrowDown') {
    e.preventDefault();
    items[Math.min(index + 1, items.length - 1)].focus();
  }
  if (e.key === 'ArrowUp') {
    e.preventDefault();
    items[Math.max(index - 1, 0)].focus();
  }
});

Реальные горячие клавиши + навигация меню с клавиатуры.

**Неправильно:** Использовать deprecated keypress

**Почему:** keypress не срабатывает для стрелок, Escape, Shift и других клавиш без символа.

**Правильно:** Используйте keydown/keyup — они работают для всех клавиш.

**Неправильно:** Путать event.key и event.code

**Почему:** key — символ ('a', 'Enter'). code — физическая клавиша ('KeyA', 'Enter').

**Правильно:** Для текста → key. Для горячих клавиш → code (или key + модификаторы).

**Неправильно:** Забывать preventDefault для горячих клавиш

**Почему:** Без preventDefault браузер выполнит стандартное действие (например, Ctrl+S — сохранение страницы).

**Правильно:** Всегда e.preventDefault() в горячих клавишах.

• keydown — при нажатии (повторяется)
• keyup — при отпускании (один раз)
• event.key — символ, event.code — физическая клавиша
• ctrlKey, shiftKey, altKey, metaKey — модификаторы
• keypress — deprecated, не используйте
• Все интерактивные элементы должны работать с клавиатуры

Назад: Вы знаете события (DA1-DA6) и формы (DA7-DA8). Теперь вы добавляете взаимодействие с клавиатуры.

Вперёд: Следующий урок (DA10) — размеры элементов и прокрутка для расчёта раскладки.