W3Docs

Тема

Русский

События keydown и keyup в JavaScript ​

Введение в события клавиатуры в JavaScript ​

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

Понимание событий keydown и keyup ​

Событие keydown ​

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

Пример события keydown ​

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of Keydown Event</title>
<style>
  .highlight { background-color: yellow; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const inputField = document.getElementById('inputField');
  inputField.addEventListener('keydown', function(event) {
    console.log('Key down:', event.key);
    if (event.key === "Enter") {
      this.classList.add('highlight');
      event.preventDefault(); // Prevents the default action of the enter key
    }
  });
});
</script>
</head>
<body>
<input type="text" id="inputField" placeholder="Press 'Enter' to highlight" />
</body>
</html>
Try it Yourself »

Код прослушивает событие keydown на поле ввода и проверяет, нажата ли клавиша "Enter". Если да, он меняет цвет фона поля ввода на желтый (класс highlight) и предотвращает стандартную отправку формы или другие действия, обычно связанные с клавишей Enter.

Событие keyup ​

Событие keyup срабатывает при отпускании клавиши, после события keydown (примечание: устаревшее событие keypress устарело и редко используется в современной веб-разработке). Это событие подходит для случаев, когда нужно знать, когда нажатие клавиши завершено, например, при обновлении пользовательского интерфейса или управлении мультимедийным контентом.

Пример события keyup ​

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of Keyup Event</title>
<style>
  .normal { background-color: transparent; }
  .active { background-color: lightgreen; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const textArea = document.getElementById('textArea');
  textArea.addEventListener('keyup', function(event) {
    console.log('Key up:', event.key);
    if (event.key === "Control") {
      this.classList.remove('active');
      this.classList.add('normal');
    }
  });
  textArea.addEventListener('keydown', function(event) {
    if (event.key === "Control") {
      this.classList.add('active');
    }
  });
});
</script>
</head>
<body>
<textarea id="textArea" rows="4" cols="50" placeholder="Press and release 'Control' to see the effect"></textarea>
</body>
</html>
Try it Yourself »

Этот код меняет цвет фона текстового поля на светло-зеленый (класс active) при нажатии клавиши Control и возвращает его к прозрачному (класс normal) при отпускании клавиши Control.

Продвинутое использование событий клавиатуры в JavaScript ​

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

Реализация пользовательских горячих клавиш ​

Пользовательские горячие клавиши позволяют пользователям быстро выполнять действия, повышая производительность и удобство использования. Этот пример демонстрирует, как создать простую пользовательскую горячую клавишу (Ctrl + S) для имитации действия сохранения, которое можно адаптировать для запуска конкретных функций в реальных приложениях.

Пример пользовательских горячих клавиш ​

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Custom Hotkeys Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
  let ctrlPressed = false;
  document.addEventListener('keydown', function(event) {
    if (event.key === "Control") {
      ctrlPressed = true;
    }
    // Use toLowerCase() for case-insensitive matching
    if (event.key.toLowerCase() === "s" && ctrlPressed) {
      alert('Saving your progress!');
      event.preventDefault(); // Prevent default to stop other actions like browser shortcuts
    }
  });

  document.addEventListener('keyup', function(event) {
    if (event.key === "Control") {
      ctrlPressed = false;
    }
  });
});
</script>
</head>
<body>
<p>Press <strong>Ctrl + S</strong> to simulate a save action.</p>
</body>
</html>
Try it Yourself »

Управление в играх ​

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

Пример управления в игре ​

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Game Control Example</title>
<style>
  #gameArea {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
  }
  #player {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    top: 125px;
    left: 125px;
  }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const player = document.getElementById('player');
  // Note: offsetLeft/Top don't account for container padding or scroll offsets.
  // For production, consider using getBoundingClientRect() or adding padding offsets.
  let posX = player.offsetLeft;
  let posY = player.offsetTop;
  document.addEventListener('keydown', function(event) {
    switch (event.key) {
      case "ArrowUp":
        posY -= 10;
        break;
      case "ArrowDown":
        posY += 10;
        break;
      case "ArrowLeft":
        posX -= 10;
        break;
      case "ArrowRight":
        posX += 10;
        break;
    }
    player.style.left = posX + 'px';
    player.style.top = posY + 'px';
  });
});
</script>
</head>
<body>
<div id="gameArea">
  <div id="player"></div>
</div>
<p>Use arrow keys to move the red square within the game area.</p>
</body>
</html>
Try it Yourself »

Повышение доступности ​

Улучшения доступности помогают сделать веб-приложения удобными для людей с ограниченными возможностями. Этот пример фокусируется на использовании событий keydown для навигации по ссылкам с помощью клавиш со стрелками на клавиатуре, облегчая навигацию с клавиатуры для пользователей, которые не могут использовать мышь.

Пример улучшения доступности ​

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accessibility Navigation Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const links = document.querySelectorAll('a');
  let currentFocus = 0;
  links[currentFocus].focus();
  document.addEventListener('keydown', function(event) {
    if (event.key === "ArrowDown") {
      currentFocus = (currentFocus + 1) % links.length;
      links[currentFocus].focus();
      event.preventDefault();
    }
    if (event.key === "ArrowUp") {
      currentFocus = (currentFocus - 1 + links.length) % links.length;
      links[currentFocus].focus();
      event.preventDefault();
    }
  });
});
</script>
</head>
<body>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>
<p>Use the Up and Down arrow keys to navigate between the links.</p>
</body>
</html>
Try it Yourself »

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

Заключение ​

События клавиатуры, такие как keydown и keyup, незаменимы для создания динамичных и интерактивных веб-приложений. Используя эти события, разработчики могут беспрепятственно захватывать ввод пользователя и реагировать на него в реальном времени. Примеры, приведенные в этой статье, служат отправной точкой для внедрения этих событий клавиатуры в ваши собственные проекты, помогая улучшить как функциональность, так и пользовательский опыт ваших веб-приложений.

Практика ​

Какие события использует JavaScript для обнаружения ввода с клавиатуры?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.