Как использовать плагин для js hotkeys?

Question

Необходимо забиндить горячую клавишу на нажатие определенного элемента сайта. Наткнулся на плагин js-hotkeys, но не могу понять, как его использовать (не работал с веб кодингом, поэтому и задаю такие глупые вопросы). Браузер Хром. Если есть другая простая реализация горячих клавиш, не могли бы показать ее Заранее спасибо

Answer 1

Библиотека весьма простая, вся нужная информация и примеры есть в документации.

В head мы подключаем эту самую библиотеку. Вbody добавим кнопку для примера и подключим наш скрипт:

<head>
  <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
</head>
<body>
  <button id="test-btn">Click me</button>
  <script src="./script.js"></script>
</body>

Далее в script.js пишем код:

// Получим кнопки по id
const button = document.querySelector('#test-btn'); 

// Повесим на кнопку событие при клике
const onButtonClick = () => alert('Button is pressed');
button.addEventListener('click', onButtonClick); 

// Зарегистрируем новое сочетание клавиш alt+h
hotkeys('alt+h', (event, handler) => {
  // Тут два варианта использования
  // Предпочтительный. Вызов той же функции, что и на кнопке
  onButtonClick();
  
  // Либо эмулирование нажатия на элемент
  button.click();
});

Стоит заметить, что если клавиша или сочетание клавиш уже занято браузером - стандартное поведение нужно отменить с помощью event.preventDefault():

// f5 - перезагрузка страницы
hotkeys('f5', (event, handler) => {
   event.preventDefault();
   //...
});

БЛОГ НА HUSL

Как использовать плагин для js hotkeys?

Ответы (1 шт):