<header>
  <h2 class="title">KeyboardEvent key</h2>
  <p class="description">Відслідковує натиснуті клавіші</p>
</header>
<main>
  <div class="result" id="keyResult">
    <!-- Результат натискання клавіші з’явиться тут -->
  </div>
  <input type="text" id="keyInput" placeholder="Натисніть будь-яку клавішу..." />
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  min-height: 50px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

input#keyInput {
  display: block;
  margin-top: 15px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

// Отримуємо посилання на поле введення та блок результату
const keyInput = document.getElementById("keyInput");
const keyResult = document.getElementById("keyResult");

// Додаємо обробник події "keydown" для відслідковування натиснутих клавіш
keyInput.addEventListener("keydown", function(event) {
  // Очищаємо попередній результат
  keyResult.innerText = "";

  // Отримуємо назву клавіші
  const key = event.key;

  // Виводимо назву натиснутої клавіші у блоці результату
  keyResult.innerText = `Ви натиснули: ${key}`;

  // Виконуємо дії залежно від натиснутої клавіші
  if (key === "Enter") {
    keyResult.innerText += "\nВи натиснули Enter, виконуємо певну дію!";
  } else if (key === "Escape") {
    keyResult.innerText += "\nВи натиснули Escape, скидаємо значення!";
    keyInput.value = ""; // Очищаємо поле введення
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.