jaywcjlove /hotkeys
➷ A robust Javascript library for capturing keyboard input. It has no dependencies.
★ 7,133⑂ 417
7,133
stars
+1+2+6
417
forks
–
watchers
–
prs
–
issues
–
releases
–
discussions
README
使用我的应用也是一种支持我的方式:
Hotkeys
HotKeys.js 是一个具有一些非常特殊功能的输入捕获库,它易于上手和使用,占用空间合理(~8kB)(压缩后:3.8kB),无依赖。它不应该干扰任何 JavaScript 库或框架。官方文档 演示预览,兼容性测试。更多示例。
bash
╭┈┈╮ ╭┈┈╮ ╭┈┈╮
┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆ ┆┆ □ ┆┆ ┈┤┆
hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
switch (handler.key) {
case 'ctrl+a': alert('你按下了 ctrl+a!');
break;
case 'ctrl+b': alert('你按下了 ctrl+b!');
break;
case 'r': alert('你按下了 r!');
break;
case 'f': alert('你按下了 f!');
break;
default: alert(event);
}
});
UMD(通用模块定义)- 用于 CommonJS/AMD 环境:
html
ES 模块 - 用于支持模块的现代浏览器:
html
import hotkeys from 'https://unpkg.com/hotkeys-js/dist/hotkeys-js.js';
hotkeys('ctrl+a', function(event, handler){
alert('你按下了 ctrl+a!');
});
在 React 中使用
react-hotkeys 是监听 keydown 和 keyup 键盘事件的 React 组件,定义和调度键盘快捷键。详细的使用方法请查看其文档 react-hotkeys。
react-hotkeys-hook - 在组件中使用键盘快捷键的 React hook。请确保您至少安装了 react 和 react-dom 的 16.8 版本,否则 hooks 将不会为您工作。
浏览器支持
Hotkeys.js 已经过测试,应该在以下浏览器中工作。
shell
Internet Explorer 6+
Safari
Firefox
Chrome
支持的按键
HotKeys 理解以下修饰符:⇧、shift、option、⌥、alt、ctrl、control、command 和 ⌘。
以下特殊按键可用于快捷键:backspace、tab、clear、enter、return、esc、escape、space、up、down、left、right、home、end、pageup、pagedown、del、delete、f1 到 f19、num_0 到 num_9、num_multiply、num_add、num_enter、num_subtract、num_decimal、num_divide。
⌘ Command()
⌃ Control
⌥ Option(alt)
⇧ Shift
⇪ Caps Lock(Capital)
~~fn 不支持 fn~~
↩︎ return/Enter space
定义快捷键
暴露了一个全局方法,当直接调用时定义快捷键。
ts
declare interface HotkeysInterface extends HotkeysAPI {
(key: string, method: KeyHandler): void;
(key: string, scope: string, method: KeyHandler): void;
(key: string, option: HotkeysOptions, method: KeyHandler): void;
shift?: boolean;
ctrl?: boolean;
alt?: boolean;
option?: boolean;
control?: boolean;
cmd?: boolean;
command?: boolean;
}
declare interface HotkeysAPI {
setScope: SetScope;
getScope: GetScope;
deleteScope: DeleteScope;
getPressedKeyCodes: GetPressedKeyCodes;
getPressedKeyString: GetPressedKeyString;
getAllKeyCodes: GetAllKeyCodes;
isPressed: IsPressed;
filter: Filter;
trigger: Trigger;
unbind: Unbind;
noConflict: NoConflict;
keyMap: Record;
modifier: Record;
modifierMap: Record;
}
js
hotkeys('f5', function(event, handler) {
// 阻止 WINDOWS 系统下的默认刷新事件
event.preventDefault();
alert('你按下了 F5!');
});
// 返回 false 停止事件并阻止默认浏览器事件
// Mac OS 系统将 command + r 定义为刷新快捷键
hotkeys('ctrl+r, command+r', function() {
alert('停止刷新!');
return false;
});
// 单个按键
hotkeys('a', function(event,handler){
//event.srcElement: input
//event.target: input
if(event.target === "input"){
alert('你按下了 a!')
}
alert('你按下了 a!')
});
// 组合键
hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
switch (handler.key) {
case 'ctrl+a': alert('你按下了 ctrl+a!');
break;
case 'ctrl+b':