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

1. Использование устаревшего свойства keyCode:
   Прежде чем мы рассмотрим более современные подходы, давайте рассмотрим традиционный метод доступа к коду ключа с использованием устаревшего свойства keyCode. Свойство keyCode предоставляет числовое значение, представляющее клавишу, нажатую во время события клавиатуры. Вот пример:

document.addEventListener('keydown', function(e) {
  var keyCode = e.keyCode;
  console.log(keyCode);
});

2. Использование свойства key:
   В современных браузерах свойство keyCode заменено свойством key. Свойство key возвращает строку, представляющую ключевое значение нажатой клавиши, что делает работу с ней более интуитивно понятной. Вот пример:

document.addEventListener('keydown', function(e) {
  var key = e.key;
  console.log(key);
});

3. Определение клавиш-модификаторов.
   Клавиши-модификаторы, такие как Shift, Ctrl и Alt, могут существенно влиять на события клавиатуры. Мы можем проверить состояние этих клавиш во время события, используя свойстваshiftKey, ctrlKey и altKey. Давайте посмотрим пример:

document.addEventListener('keydown', function(e) {
  if (e.shiftKey) {
    console.log("Shift key is pressed");
  }
  if (e.ctrlKey) {
    console.log("Ctrl key is pressed");
  }
  if (e.altKey) {
    console.log("Alt key is pressed");
  }
});

4. Обработка определенных нажатий клавиш.
   Иногда нам может потребоваться выполнить определенные действия на основе определенных нажатий клавиш. Мы можем добиться этого, сравнивая значение ключа с предопределенными значениями. Вот пример, в котором мы слушаем нажатие клавиши Enter:

document.addEventListener('keydown', function(e) {
  if (e.key === "Enter") {
    console.log("Enter key is pressed");
    // Perform your desired action here
  }
});

5. Предотвращение поведения по умолчанию.
   В некоторых сценариях нам может потребоваться предотвратить поведение по умолчанию, связанное с нажатием клавиши, например предотвращение отправки формы при нажатии Enter. Мы можем добиться этого, вызвав метод preventDefault()объекта события. Пример:

document.addEventListener('keydown', function(e) {
  if (e.key === "Enter") {
    e.preventDefault();
    // Prevent form submission
  }
});

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