Генератор кодов клавиш

Работа с клавиатурными событиями — неотъемлемая часть создания интерактивных веб-приложений. Однако, запомнить или быстро узнать коды для всех клавиш бывает сложно. Создание инструмента для отображения этих данных становится тривиальной задачей, если использовать современные фреймворки, такие как Vue.js. Его реактивность и лаконичный синтаксис позволяют в несколько строк кода создать мощный и полезный компонент, который вы видите ниже.

Нажмите любую клавишу на клавиатуре, чтобы в реальном времени увидеть ее основные коды: event.key, event.keyCode и event.code.

Нажмите любую клавишу, чтобы получить ее код

event.key

event.keyCode

event.code

<div id="app" class="app">
  <p v-if="!key" class="app__intro">Нажмите любую клавишу, чтобы получить ее код</p>
  <div v-else class="app__container">
    <div class="app__item">
      <p class="app__title">event.key</p>
      <div class="app__code">{{ key }}</div>
    </div>
    <div class="app__item">
      <p class="app__title">event.keyCode</p>
      <div class="app__code">{{ keyCode }}</div>
    </div>
    <div class="app__item">
      <p class="app__title">event.code</p>
      <div class="app__code">{{ code }}</div>
    </div>
  </div>
</div>

.app {
  display: grid;
  place-items: center;
}
.app__intro {
  padding: 10px 20px;
  background-color: #F2F3F4;
  font-size: 24px;
  border: 2px solid #A6ACAF;
  text-align: center;
}
.app__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px;
}
.app__item {
  display: grid;
  place-items: center;
  gap: 6px 0;
}
.app__title {
  font-weight: 500;
}
.app__code {
  display: grid;
  place-items: center;
  inline-size: 200px;
  block-size: 75px;
  color: #1b2631;
  background-color: #F2F3F4;
  font-size: 20px;
  font-weight: 700;
  border: 2px solid #A6ACAF;
}

const { createApp, ref, onMounted } = Vue
createApp({
    setup() {
        const key = ref('')
        const keyCode = ref(0)
        const code = ref('')        
        onMounted(() => {
            window.addEventListener('keydown', (e) =>{                
                key.value = e.key === ' ' ? 'Space' : e.key
                keyCode.value = e.keyCode
                code.value = e.code
            })            
        })        
        return { key, keyCode, code }
    }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Как работает генератор кодов клавиш?

Выше представлен исходный код этого интерактивного компонента. Давайте разберем его по частям, чтобы понять, как просто Vue.js управляет состоянием и логикой.

HTML (Шаблон)

В шаблоне мы используем директивы Vue для условного рендеринга и отображения данных.

v-if="!key" Пока клавиша не нажата (значение key ложно), отображается приглашающая надпись.
v-else Как только клавиша нажата, отрисовывается блок с тремя ячейками кодов.
{{ key }}, {{ keyCode }}, {{ code }} — это интерполяции, которые автоматически обновляются в DOM при изменении соответствующих реактивных переменных.

CSS (Стили)

Стили обеспечивают чистый и адаптивный внешний вид. Используется CSS Grid для выравнивания элементов по центру и для создания сетки из трех колонок.

JavaScript (Логика на Vue 3 с Composition API)

Это сердце нашего компонента, где используется Composition API Vue.js 3.

Реактивные данные: С помощью ref создаются три реактивные переменные: key, keyCode и code. Их изменение автоматически обновляет интерфейс.
Хук жизненного цикла: onMounted гарантирует, что обработчик события keydown будет добавлен к окну только после монтирования компонента в DOM.
Обработчик события: При нажатии клавиши функция-обработчик запускается и получает объект события e.
key.value = e.key === ' ' ? 'Space' : e.key — здесь мы делаем клавишу «Пробел» более читаемой, отображая «Space» вместо пустой строки.
keyCode.value = e.keyCode — сохраняем числовой код клавиши (устаревший, но все еще используемый).
code.value = e.code — сохраняем физический код клавиши на клавиатуре, который не зависит от раскладки (например, KeyA для латинской ‘A’ и кириллической ‘Ф’).

Этот компонент — небольшой пример того, как быстро и эффективно можно создавать динамические интерфейсы с Vue.js. Мы не просто пишем код, мы создаем инструменты, которые улучшают пользовательский опыт и помогают в работе разработчикам.

Готовы оживить ваш сайт или веб-приложение?

Наша веб-студия специализируется на создании креативных, интерактивных и высокопроизводительных сайтов и компонентов, которые выделят ваш продукт на фоне конкурентов. От сложных анимаций до удобных пользовательских интерфейсов — мы воплотим ваши самые смелые идеи в код.

Свяжитесь с нами, и давайте создадим что-то удивительное вместе!

Предыдущий Следующий