JavaScript обнаруживает, какая клавиша нажимается

Вы можете оказаться в ситуации, когда определенные ключи могут сделать что -то для вашего приложения или игры.

Сегодня мы рассмотрим, как мы можем обнаружить, какая клавиша нажимается в JavaScript.

Конечный результат – эта крутая маленькая игровая площадка:

Обнаружение ключей в JavaScript

Давайте начнем с оснований. Нам понадобится способ для JavaScript, чтобы знать, что нажата любая клавиша.

document.onkeydown = function(e) {
  console.log('key down');
  console.log(e);
};

Это зарегистрирует все события Key Down, которые мы ищем.

E Переменная будет содержать фактическую клавишу, и у нее есть полная информация внутри.

Есть несколько вещей, которые мы можем использовать, которые полезны там.

• ключ: Строковое представление нажатой клавиши
• ключевой код: Число, связанное с ключом. Это в основном используется для определения ключей в коде
• Код: комбинация, чтобы определить, какую сторону была нажата клавиша (LeftMeta/RightMeta)

Зная это, давайте сделаем крутой визуальный инструмент, который выведет эти три элемента для пользователя.

HTML -структура

Я собираюсь использовать Tailwind, чтобы сделать быстрое приложение, основная установка будет:

  

    

      

    
    

      

        Press any key to see the magic 🪄
      
      
key: 
      
code: 
      
keyCode: 
    
  

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

Я также добавил информационный абзац, когда у нас еще нет ключа.

Присвоение клавиш на наш фронт-конце

Мы начинаем с определения переменных, которые нам понадобятся.

const key = document.getElementById('key'),
  code = document.getElementById('code'),
  keyCode = document.getElementById('keyCode'),
  keyCodeLarge = document.getElementById('keyCodeLarge'),
  info = document.getElementById('info'),
  hiddenElements = document.querySelectorAll('.hidden');

Это сочетание ключевой информации, которую мы разместим, и скрытых полей, которые нам нужно показать.

Теперь в нашей функции Keydown мы можем действовать по этому поводу и поместить правильную информацию.

document.onkeydown = function(e) {
  [].forEach.call(hiddenElements, function(el) {
    el.classList.remove('hidden');
  });
  info.classList.add('hidden');
  key.innerHTML = e.key;
  code.innerHTML = e.code;
  keyCode.innerHTML = e.keyCode;
  keyCodeLarge.innerHTML = e.keyCode;
};

Это так же просто, как и!

Вы можете попробовать это в этом коде.

Спасибо за чтение, и давайте подключимся!

Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку электронной почты и подключиться на Facebook или Твиттер

Оригинал: “https://dev.to/dailydevtips1/javascript-detecting-which-key-is-pressed-322g”