Горячие клавиши
Это мощная библиотека JavaScript для захвата ввода с клавиатуры и комбинаций клавиш, она проста в использовании, не имеет зависимостей, сжата до (~3kb) и gzip: 1.73kb. Официальная документация и демоверсия доступны по адресу http://jaywcjlove.github.io/hotkeys/.
╭┈┈╮ ╭┈┈╮ ╭┈┈╮
┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆ ┆┆ □ ┆┆ ┈┤┆ < ┆ -__┘┆ ┆ ┆┆__ ┈┈┤
╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈ ┆╰┈┈┈┈┈╯
╰┈┈┈┈┈╯
Вам потребуется установить Node.js на вашей системе.
# bower 安装
$ bower install hotkeysjs
# npm 安装
$ npm install hotkeys-js
$ npm run build # 编译
$ npm run watch # 开发模式
import hotkeys from 'hotkeys-js';
hotkeys('f5', function(event, handler){
// Prevent the default refresh event under WINDOWS system
event.preventDefault()
alert('you pressed F5!')
});
Или вы можете вручную загрузить и включить hotkeys.js в свой HTML или использовать UNPKG.
CDN: UNPKG | jsDelivr | Githack | Statically | bundle.run
<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
<script type="text/javascript">
hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler) {
switch(handler.key){
case "ctrl+a":alert('you pressed ctrl+a!');break;
case "ctrl+b":alert('you pressed ctrl+b!');break;
case "r":alert('you pressed r!');break;
case "f":alert('you pressed f!');break;
}
});
</script>
react-hotkeys — это компонент React, который прослушивает события keydown и keyup на клавиатуре и назначает сочетания клавиш. Подробные инструкции по использованию см. в документации.
react-hotkeys-hook — хук React для использования сочетаний клавиш в компонентах. Убедитесь, что у вас установлена версия react и react-dom не ниже 16.8, иначе хук не будет работать.
<script type="text/javascript" src="./js/hotkeys.js"></script>
Загрузка пакета
import hotkeys from 'hotkeys-js';
hotkeys('shift+a,alt+d, w', function(e){
console.log('干点活儿',e);
if(hotkeys.shift) console.log('大哥你摁下了 shift 键!');
if(hotkeys.ctrl) console.log('大哦你摁下了 ctrl 键!');
if(hotkeys.alt) console.log('大哦你摁下了 alt 键!');
});
⇧
, shift
, option
, ⌥
, alt
, ctrl
, control
, command
, ⌘
⌘
Command()
⌃
Control
⌥
Option(alt)
⇧
Shift
⇪
Caps Lock(大写)
fn
功能键就是fn(不支持)
↩︎
return/enter
space
空格键
Можно определить следующие модификаторы клавиш: shift
alt
option
ctrl
control
command
. Обратите внимание, что +
и =
имеют одинаковое значение ключа, а сочетание клавиш установлено как ⌘+=
## Режим совместимости
var k = hotkeys.noConflict();
k('a', function() {
console.log("Здесь можно сделать что-нибудь");
});
hotkeys()
// -->Uncaught TypeError: hotkeys is not a function(anonymous function)
// @ VM2170:2InjectedScript._evaluateOn
// @ VM2165:883InjectedScript._evaluateAndWrap
// @ VM2165:816InjectedScript.evaluate @ VM2165:682
Установите зависимости, запустите самоперезагружаемую сборку и получите код:
$ git https://github.com/jaywcjlove/hotkeys.git
$ cd hotkeys # Перейдите в каталог
$ npm install # Или используйте yarn install для установки зависимостей
Запустите следующую команду для автоматической перезагрузки сборки:
$ npm run watch
Для запуска стабильной среды выполните:
$ npm run doc
Если вы хотите внести свой вклад, пожалуйста, fork Hotkeys.js
и добавьте свой тестовый код (в каталог test), а затем отправьте PR.
$ npm run test
$ npm run test:watch # Модель разработки
Как всегда, спасибо нашим замечательным участникам!
Сделано с помощью github-action-contributors.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )