{"id":25975849,"url":"https://github.com/block-stacker/hotkey-js","last_synced_at":"2026-06-10T14:31:19.903Z","repository":{"id":229469372,"uuid":"776442219","full_name":"block-stacker/hotkey-js","owner":"block-stacker","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-23T14:25:34.000Z","size":47417,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-05T03:33:20.264Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/block-stacker.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"custom":"https://jaywcjlove.github.io/#/sponsor"}},"created_at":"2024-03-23T14:20:17.000Z","updated_at":"2025-02-25T21:40:13.000Z","dependencies_parsed_at":"2024-03-24T16:02:21.015Z","dependency_job_id":null,"html_url":"https://github.com/block-stacker/hotkey-js","commit_stats":null,"previous_names":["savvy-bit/hotkey-js","block-stacker/hotkey-js"],"tags_count":94,"template":false,"template_full_name":null,"purl":"pkg:github/block-stacker/hotkey-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block-stacker%2Fhotkey-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block-stacker%2Fhotkey-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block-stacker%2Fhotkey-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block-stacker%2Fhotkey-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/block-stacker","download_url":"https://codeload.github.com/block-stacker/hotkey-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/block-stacker%2Fhotkey-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34157453,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-05T03:32:21.649Z","updated_at":"2026-06-10T14:31:19.897Z","avatar_url":"https://github.com/block-stacker.png","language":"JavaScript","funding_links":["https://jaywcjlove.github.io/#/sponsor"],"categories":[],"sub_categories":[],"readme":"# Hotkeys\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![npm dowload](https://img.shields.io/npm/dm/hotkeys-js?logo=npm)](https://www.npmjs.com/package/hotkeys-js)\n[![Stargazers](https://img.shields.io/github/stars/jaywcjlove/hotkeys.svg)](https://github.com/jaywcjlove/hotkeys/stargazers)\n![no dependencies](http://jaywcjlove.github.io/sb/status/no-dependencies.svg)\n[![GitHub Actions CI](https://github.com/jaywcjlove/hotkeys/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/hotkeys/actions/workflows/ci.yml)\n[![Coverage Status](https://coveralls.io/repos/github/jaywcjlove/hotkeys/badge.svg?branch=master)](https://coveralls.io/github/jaywcjlove/hotkeys?branch=master)\n[![English](https://jaywcjlove.github.io/sb/lang/english.svg)](https://jaywcjlove.github.io/hotkeys-js/)\n[![for Gitee](https://jaywcjlove.github.io/sb/ico/gitee.svg)](https://gitee.com/jaywcjlove/hotkeys)\n\n这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键，它易于使用，没有依赖，压缩只有([~6kB](https://bundlephobia.com/result?p=hotkeys-js))，gzip: **`2.8kB`**。[官方文档DEMO预览](http://jaywcjlove.github.io/hotkeys-js/?lang=cn)，[更多实例](https://github.com/jaywcjlove/hotkeys/issues?q=label%3ADemo+)。\n\n\n```shell\n╭┈┈╮          ╭┈┈╮  ╭┈┈╮\n┆  ├┈┈..┈┈┈┈┈.┆  └┈╮┆  ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.\n┆     ┆┆  □  ┆┆   ┈┤┆    \u003c ┆  -__┘┆  ┆  ┆┆__ ┈┈┤\n╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈  ┆╰┈┈┈┈┈╯\n                                  ╰┈┈┈┈┈╯\n```\n\n## 创建\n\n您将需要在您的系统上安装的 Node.js。\n\n```sh\n# bower 安装\n$ bower install hotkeysjs\n\n# npm 安装\n$ npm install hotkeys-js\n\n$ npm run build # 编译\n$ npm run watch # 开发模式\n```\n\n```js\nimport hotkeys from 'hotkeys-js';\n\nhotkeys('f5', function(event, handler){\n  // Prevent the default refresh event under WINDOWS system\n  event.preventDefault() \n  alert('you pressed F5!') \n});\n```\n\n或者在您的HTML中手动下载并引入 **hotkeys.js**，你也可以通过 [UNPKG](https://unpkg.com/hotkeys-js/dist/) 进行下载：\n\nCDN: [UNPKG](https://unpkg.com/hotkeys-js/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/hotkeys-js@3.7.3/) | [Githack](https://raw.githack.com/jaywcjlove/hotkeys/master/dist/hotkeys.min.js) | [Statically](https://cdn.statically.io/gh/jaywcjlove/hotkeys/master/dist/hotkeys.min.js) | [bundle.run](https://bundle.run/hotkeys-js@3.7.3)\n\n```html\n\u003cscript src=\"https://unpkg.com/hotkeys-js/dist/hotkeys.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\nhotkeys('ctrl+a,ctrl+b,r,f', function(event,handler) {\n  switch(handler.key){\n    case \"ctrl+a\":alert('you pressed ctrl+a!');break;\n    case \"ctrl+b\":alert('you pressed ctrl+b!');break;\n    case \"r\":alert('you pressed r!');break;\n    case \"f\":alert('you pressed f!');break;\n  }\n});\n\u003c/script\u003e\n```\n\n## React中使用\n\n[react-hotkeys](https://github.com/jaywcjlove/react-hotkeys) 是 React 组件，用于侦听 keydown 和 keyup 键盘事件，定义和分配键盘快捷键。 详细的使用方法请参见其文档，详细使用方法请参考文档 [react-hotkeys](https://github.com/jaywcjlove/react-hotkeys)。\n\n[react-hotkeys-hook](https://github.com/JohannesKlauss/react-hotkeys-hook) - React Hook，用于在组件中使用键盘快捷键。确保您至少安装了 16.8 版本的 react 和 react-dom，否则钩子将对您不起作用。\n\n## 使用\n\n传统调用\n\n```html\n\u003cscript type=\"text/javascript\" src=\"./js/hotkeys.js\"\u003e\u003c/script\u003e\n```\n\n包加载\n\n```js\nimport hotkeys from 'hotkeys-js';\n\nhotkeys('shift+a,alt+d, w', function(e){\n  console.log('干点活儿',e);\n  if(hotkeys.shift) console.log('大哥你摁下了 shift 键！');\n  if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！');\n  if(hotkeys.alt) console.log('大哥你摁下了 alt 键！');\n});\n```\n\n## 支持的键\n\n`⇧`, `shift`, `option`, `⌥`, `alt`, `ctrl`, `control`, `command`, `⌘`\n\n`⌘` Command()  \n`⌃` Control  \n`⌥` Option(alt)  \n`⇧` Shift  \n`⇪` Caps Lock(大写)  \n~~`fn` 功能键就是fn(不支持)~~  \n`↩︎` return/enter  \n`space` 空格键  \n\n## 修饰键判断\n\n可以对下面的修饰键判断 `shift` `alt` `option` `ctrl` `control` `command`，特别注意`+`和`=`键值相同，组合键设置`⌘+=`\n\n```js\nhotkeys('shift+a,alt+d, w', function(e){\n  console.log('干点活儿',e);\n  if(hotkeys.shift) console.log('您摁下了 shift 键!');\n  if(hotkeys.ctrl) console.log('您摁下了 ctrl 键!');\n  if(hotkeys.alt) console.log('您摁下了 alt 键!');\n  if(hotkeys.option) console.log('您摁下了 option 键!');\n  if(hotkeys.control) console.log('您摁下了 control 键!');\n  if(hotkeys.cmd) console.log('您摁下了 cmd 键!');\n  if(hotkeys.command) console.log('您摁下了 command 键!');\n});\n```\n\n## 定义快捷键\n\n\u003e `hotkeys([keys:\u003cString\u003e], [option:[string|object|function]], [callback:\u003cfunction\u003e])`\n\n```js\n// 定义 F5 快捷键\nhotkeys('f5', function(event,handler){\n  //event.srcElement: input \n  //event.target: input\n  // 阻止WINDOWS系统下的默认刷新事件\n  event.preventDefault() \n  alert('你按下了 F5 键!') \n});\n// 返回 false 将停止活动，并阻止默认浏览器事件\n// Mac OS 系统 定义 `command+r` 为刷新快捷键\nhotkeys('ctrl+r, command+r', function(){\n  alert('停止刷新!');\n  return false;\n});\n\n// 定义a快捷键\nhotkeys('a', function(event,handler){\n  //event.srcElement: input \n  //event.target: input\n  if(event.target === \"input\"){\n    alert('你在输入框中按下了 a!')\n  }\n  alert('你按下了 a!') \n});\n\n// 定义 ctrl+a、ctrl+b、r、f 四组快捷键\nhotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){\n  switch(handler.key){\n    case \"ctrl+a\": alert('你按下了ctrl+a!'); break;\n    case \"ctrl+b\": alert('你按下了ctrl+b!'); break;\n    case \"r\": alert('你按下了r!'); break;\n    case \"f\": alert('你按下了f!'); break;\n  }\n  //handler.scope 范围\n});\n\n\n// 多个快捷方式做同样的事情\nhotkeys('⌘+r, ctrl+r', function(){ });\n\n// 对所有摁键执行任务\nhotkeys('*','wcj', function(e){\n  console.log('干点活儿',e);\n  console.log(\"key.getScope()::\",hotkeys.getScope());\n  if(hotkeys.shift) console.log('大哥你摁下了 shift 键！');\n  if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！');\n  if(hotkeys.alt) console.log('大哥你摁下了 alt 键！');\n});\n\n// 可以设置自定义的分割符\nhotkeys('ctrl-y, ctrl-a', {splitKey: '-'}, function(e){\n  console.log('you press bind keys')\n})\n```\n\n#### option \n\n- `scope\u003cString\u003e`\n- `element\u003cHTMLElement\u003e`\n- `keyup\u003cBoolean\u003e`\n- `keydown\u003cBoolean\u003e`\n- `splitKey\u003cstring\u003e` (默认值 `+`)\n- `capture\u003cBoolean\u003e`\n- `single\u003cBoolean\u003e`\n\n```js\nhotkeys('o, enter', {\n  scope: 'wcj',\n  element: document.getElementById('warpper'),\n}, function(){ \n  console.log('do something else');\n});\n\nhotkeys('ctrl-+', { splitKey: '-' }, function(e) {\n  console.log('you pressed ctrl and +');\n});\n\nhotkeys('+', { splitKey: '-' }, function(e){\n  console.log('you pressed +');\n})\n```\n\n**keyup**\n\n**key down** 和 **key up** 将都执行回调事件。\n\n```js\nhotkeys('ctrl+a,alt+a+s', { keyup: true }, (evn, handler) =\u003e {\n  if(evn.type === 'keydown') {\n    console.log('keydown:', evn.type, handler, handler.key);\n  }\n  if(evn.type === 'keyup') {\n    console.log('keyup:', evn.type, handler, handler.key);\n  }\n});\n```\n\n## API 参考\n\n### 星号 * \n\n通过修饰符号判断\n\n```js\nhotkeys('*', function() {\n  if (hotkeys.shift) {\n    console.log('shift is pressed!');\n  }\n\n  if (hotkeys.ctrl) {\n    console.log('ctrl is pressed!');\n  }\n\n  if (hotkeys.alt) {\n    console.log('alt is pressed!');\n  }\n\n  if (hotkeys.option) {\n    console.log('option is pressed!');\n  }\n\n  if (hotkeys.control) {\n    console.log('control is pressed!');\n  }\n\n  if (hotkeys.cmd) {\n    console.log('cmd is pressed!');\n  }\n\n  if (hotkeys.command) {\n    console.log('command is pressed!');\n  }\n});\n```\n\n### 切换快捷键\n\n如果在单页面在不同的区域，相同的快捷键，干不同的事儿，之间来回切换。O(∩_∩)O ！\n\n```js\n// 一个快捷键，有可能干的活儿不一样哦\nhotkeys('ctrl+o, ctrl+alt+enter', 'scope1', function(){\n  console.log('你好看');\n});\n\nhotkeys('ctrl+o, enter', 'scope2', function(){ \n  console.log('你好丑陋啊！');\n});\n\n// 你摁 “ctrl+o”组合键\n// 当scope等于 scope1 ，执行 回调事件打印出 “你好看”，\n// 当scope等于 scope2 ，执行 回调事件打印出 “你好丑陋啊！”，\n\n// 通过setScope设定范围scope\nhotkeys.setScope('scope1'); // 默认所有事儿都干哦\n```\n\n### 标记快捷键范围\n\n**删除** 区域范围标记\n\n```js\nhotkeys.deleteScope('scope1');\n```\n\n**获取** 区域范围标记\n\n```js\nhotkeys.getScope();\n```\n\n**设置** 区域范围标记\n\n```js\nhotkeys.setScope('scope1');\n```\n\n### trigger\n\n```js\nhotkeys.trigger('ctrl+o')\nhotkeys.trigger('ctrl+o', 'scope2')\n```\n\n### 解除绑定\n\n`hotkeys.unbind()` 解除绑定的所有快捷键\n`hotkeys.unbind(\"ctrl+o, ctrl+alt+enter\")` 解除绑定两组快捷键  \n`hotkeys.unbind(\"ctrl+o\",\"files\")` 解除绑定名字叫files的区域范围中的一组快捷键  \n\n```js\n// 解除绑定 'a' 程序函数\nhotkeys.unbind('a');\n\n// 仅针对单个范围解除绑定快捷键\n// 如果未指定范围，则默认为当前范围（hotkeys.getScope()）\nhotkeys.unbind('o, enter', 'issues');\nhotkeys.unbind('o, enter', 'files');\n```\n\n通过函数来解除绑定\n\n```js\nfunction example(){}\nhotkeys('a', example);\nhotkeys.unbind('a', example);\n\nhotkeys('a', 'issues', example);\nhotkeys.unbind('a', 'issues', example);\n```\n\n可以通过传入对象解除绑定的快捷键\n\n```js\nhotkeys.unbind({\n  key: 'ctrl-e,ctrl-u',\n  scope: 'issues',\n  spitKey: '-'\n})\n```\n\n传入数组可同时解除多个scope下绑定的快捷键\n\n```js\nhotkeys.unbind([\n  {\n    key: 'a, ctrl+r',\n    scope: 'issues',\n  },\n  {\n    key: '+, ctrl-y',\n    scope: 'test',\n    splitKey: '-'\n  }\n])\n```\n\n### isPressed\n\n判断摁下的键是否为某个键\n\n```js\nhotkeys('a', function(){\n  console.log(hotkeys.isPressed(\"a\")); //=\u003e true\n  console.log(hotkeys.isPressed(\"A\")); //=\u003e true\n  console.log(hotkeys.isPressed(65)); //=\u003e true\n});\n```\n\n### getPressedKeyCodes\n\n获取摁下绑定键的键值 `hotkeys.getPressedKeyCodes()`\n\n```js\nhotkeys('command+ctrl+shift+a,f', function(){\n  console.log(hotkeys.getPressedKeyCodes()); //=\u003e [17, 65] 或者 [70]\n})\n```\n\n### getPressedKeyString\n\n获取所有注册代码的列表\n\n```js\nhotkeys('command+ctrl+shift+a,f', function() {\n  console.log(hotkeys.getPressedKeyString()); //=\u003e ['⌘', '⌃', '⇧', 'A', 'F']\n})\n```\n\n\n### getAllKeyCodes\n\nGet a list of all registration codes.\n\n```js\nhotkeys('command+ctrl+shift+a,f', function() {\n  console.log(hotkeys.getAllKeyCodes());\n  // [\n  //   { scope: 'all', shortcut: 'command+ctrl+shift+a', mods: [91, 17, 16], keys: [91, 17, 16, 65] },\n  //   { scope: 'all', shortcut: 'f', mods: [], keys: [42] }\n  // ]\n})\n```\n\n### filter\n\n`INPUT`  `SELECT` `TEXTAREA` 默认不处理。\n`hotkeys.filter` 返回 `true` 快捷键设置才会起作用，`false` 快捷键设置失效。\n\n```javascript\nhotkeys.filter = function(event){\n  return true;\n}\n// 如何增加过滤可编辑标签 \u003cdiv contentEditable=\"true\"\u003e\u003c/div\u003e\n// contentEditable老浏览器不支持滴\nhotkeys.filter = function(event) {\n  var target = event.target || event.srcElement;\n  var tagName = target.tagName;\n  return !(target.isContentEditable ||\n  tagName == 'INPUT' ||\n  tagName == 'SELECT' ||\n  tagName == 'TEXTAREA');\n}\n\n//\nhotkeys.filter = function(event){\n  var tagName = (event.target || event.srcElement).tagName;\n  hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');\n  return true;\n}\n```\n\n## 兼容模式\n\n```js\nvar k = hotkeys.noConflict();\nk('a', function() {\n  console.log(\"这里可以干一些事儿\")\n});\n\nhotkeys()\n// --\u003eUncaught TypeError: hotkeys is not a function(anonymous function)\n// @ VM2170:2InjectedScript._evaluateOn\n// @ VM2165:883InjectedScript._evaluateAndWrap\n// @ VM2165:816InjectedScript.evaluate @ VM2165:682\n```\n \n## 开发\n\n安装依赖，运行自重载构建，获取代码：\n\n```shell\n$ git https://github.com/jaywcjlove/hotkeys.git\n$ cd hotkeys     # 进入目录\n$ npm install    # 或者使用 yarn install 安装依赖\n```\n\n运行下面命令自动重载构建：\n\n```shell\n$ npm run watch\n```\n\n运行稳定环境\n\n```shell\n$ npm run doc\n```\n\n如果要贡献，请 fork `Hotkeys.js`, 并添加您的测试代码(在 test 目录中)，并提交一个 PR。\n\n```shell\n$ npm run test\n$ npm run test:watch # Development model\n```\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\u003ca href=\"https://github.com/jaywcjlove/hotkeys-js/graphs/contributors\"\u003e\n  \u003cimg src=\"https://jaywcjlove.github.io/hotkeys-js/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n\n## License\n\n[MIT © Kenny Wong](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblock-stacker%2Fhotkey-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblock-stacker%2Fhotkey-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblock-stacker%2Fhotkey-js/lists"}