jaywcjlove /hotkeys

➷ A robust Javascript library for capturing keyboard input. It has no dependencies.

★ 7,133⑂ 417
JavaScriptCreated 2015-05-18jaywcjlove.github.io/hotkeys-js
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': 

Snapshot: 2026-11-10T09:35:25Z · Data license Apache-2.0 · JSON