14 | {children}
15 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/website/styles/reset.css:
--------------------------------------------------------------------------------
1 | [data-color-mode*='dark'], [data-color-mode*='dark'] body {
2 | --color-header-bg: var(--color-theme-bg);
3 | }
4 | [data-color-mode*='light'], [data-color-mode*='light'] body {
5 | --color-header-bg: #333;
6 | background: #f8f8f8 url(../assets/bg.jpg) repeat top left;
7 | }
8 |
9 | *, *:before, *:after {
10 | box-sizing: inherit !important;
11 | }
12 |
13 | body {
14 | font-family: "PingHei","Lucida Grande", "Lucida Sans Unicode", "STHeitiSC-Light", "Helvetica","Arial","Verdana","sans-serif";
15 | transition: all 0.3s;
16 | margin: 0;
17 | }
18 |
19 | a {
20 | text-decoration: none;
21 | }
22 |
23 | .wmde-markdown {
24 | background-color: transparent !important;
25 | }
26 | .wmde-markdown img {
27 | background-color: transparent !important;
28 | }
29 |
30 |
--------------------------------------------------------------------------------
/.github/workflows/pr.yml:
--------------------------------------------------------------------------------
1 | name: CI-PR
2 | on:
3 | pull_request:
4 |
5 | env:
6 | SKIP_PREFLIGHT_CHECK: true
7 |
8 | jobs:
9 | build-deploy:
10 | runs-on: ubuntu-latest
11 | permissions:
12 | contents: write
13 | id-token: write
14 | steps:
15 | - uses: actions/checkout@v4
16 | - uses: actions/setup-node@v4
17 | with:
18 | node-version: 20
19 | registry-url: 'https://registry.npmjs.org'
20 |
21 | - name: Look Changelog
22 | uses: jaywcjlove/changelog-generator@main
23 | with:
24 | token: ${{ secrets.GITHUB_TOKEN }}
25 | filter-author: (jaywcjlove|小弟调调™|dependabot\[bot\]|Renovate Bot)
26 | filter: (^[\s]+?[R|r]elease)|(^[R|r]elease)
27 |
28 | - run: npm install
29 | - run: npm run build
30 | - run: npm run test
31 |
--------------------------------------------------------------------------------
/website/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
16 | Licensed under MIT. (Yes it´s free and
17 | open-sourced
18 | )
19 |
20 |
21 | ©
22 | {name}
23 | {year}
24 |
25 | HotKeys.js Format Test
36 |Test different distribution formats of hotkeys-js library:
37 | 38 |
39 |
43 |
44 | 1. IIFE Format Test (hotkeys-js.min.js)
40 |Press F1 to test IIFE version
41 |Loading...
42 |
45 |
49 |
50 | 2. UMD Format Test (hotkeys-js.umd.cjs)
46 |Press F2 to test UMD version
47 |Loading...
48 |
51 |
56 |
57 |
58 |
59 |
74 |
75 |
76 |
80 |
81 |
96 |
97 |
98 |
110 |
111 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | export interface KeyCodeInfo {
2 | scope: string;
3 | shortcut: string;
4 | mods: number[];
5 | keys: number[];
6 | }
7 |
8 | export interface UnbindInfo {
9 | key: string;
10 | scope?: string;
11 | method?: KeyHandler;
12 | splitKey?: string;
13 | }
14 |
15 | export interface HotkeysEvent {
16 | keyup: boolean;
17 | keydown: boolean;
18 | scope: string;
19 | mods: number[];
20 | shortcut: string;
21 | method: KeyHandler;
22 | key: string;
23 | splitKey: string;
24 | element: HTMLElement | Document;
25 | keys?: number[];
26 | }
27 |
28 | export interface KeyHandler {
29 | (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent): void | boolean;
30 | }
31 |
32 | export type SetScope = (scope: string) => void;
33 |
34 | export type GetScope = () => string;
35 |
36 | export type DeleteScope = (scope?: string, newScope?: string) => void;
37 |
38 | export type GetPressedKeyCodes = () => number[];
39 |
40 | export type GetPressedKeyString = () => string[];
41 |
42 | export type GetAllKeyCodes = () => KeyCodeInfo[];
43 |
44 | export interface IsPressed {
45 | /** For example, `hotkeys.isPressed(77)` is true if the `M` key is currently pressed. */
46 | (keyCode: number): boolean;
47 | /** For example, `hotkeys.isPressed('m')` is true if the `M` key is currently pressed. */
48 | (keyCode: string): boolean;
49 | }
50 |
51 | export type Filter = (event: KeyboardEvent) => boolean;
52 |
53 | export type Trigger = (shortcut: string, scope?: string) => void;
54 |
55 | export interface Unbind {
56 | (key?: string): void;
57 | (keysInfo: UnbindInfo): void;
58 | (keysInfo: UnbindInfo[]): void;
59 | (key: string, scopeName: string): void;
60 | (key: string, scopeName: string, method: KeyHandler): void;
61 | (key: string, method: KeyHandler): void;
62 | }
63 |
64 | export type NoConflict = (deep?: boolean) => HotkeysInterface;
65 |
66 | export interface HotkeysOptions {
67 | scope?: string;
68 | element?: HTMLElement | Document;
69 | keyup?: boolean;
70 | keydown?: boolean;
71 | capture?: boolean;
72 | splitKey?: string;
73 | single?: boolean;
74 | }
75 |
76 | export interface HotkeysAPI {
77 | /**
78 | * Use the `hotkeys.setScope` method to set scope. There can only be one active scope besides 'all'. By default 'all' is always active.
79 | *
80 | * ```js
81 | * // Define shortcuts with a scope
82 | * hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function() {
83 | * console.log('do something');
84 | * });
85 | * hotkeys('o, enter', 'files', function() {
86 | * console.log('do something else');
87 | * });
88 | *
89 | * // Set the scope (only 'all' and 'issues' shortcuts will be honored)
90 | * hotkeys.setScope('issues'); // default scope is 'all'
91 | * ```
92 | */
93 | setScope: SetScope;
94 | /**
95 | * Use the `hotkeys.getScope` method to get scope.
96 | *
97 | * ```js
98 | * hotkeys.getScope();
99 | * ```
100 | */
101 | getScope: GetScope;
102 | /**
103 | * Use the `hotkeys.deleteScope` method to delete a scope. This will also remove all associated hotkeys with it.
104 | *
105 | * ```js
106 | * hotkeys.deleteScope('issues');
107 | * ```
108 | * You can use second argument, if need set new scope after deleting.
109 | *
110 | * ```js
111 | * hotkeys.deleteScope('issues', 'newScopeName');
112 | * ```
113 | */
114 | deleteScope: DeleteScope;
115 | /**
116 | * Returns an array of key codes currently pressed.
117 | *
118 | * ```js
119 | * hotkeys('command+ctrl+shift+a,f', function() {
120 | * console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] or [70]
121 | * })
122 | * ```
123 | */
124 | getPressedKeyCodes: GetPressedKeyCodes;
125 | /**
126 | * Returns an array of key codes currently pressed.
127 | *
128 | * ```js
129 | * hotkeys('command+ctrl+shift+a,f', function() {
130 | * console.log(hotkeys.getPressedKeyString()); //=> ['⌘', '⌃', '⇧', 'A', 'F']
131 | * })
132 | * ```
133 | */
134 | getPressedKeyString: GetPressedKeyString;
135 | /**
136 | * Get a list of all registration codes.
137 | *
138 | * ```js
139 | * hotkeys('command+ctrl+shift+a,f', function() {
140 | * console.log(hotkeys.getAllKeyCodes());
141 | * // [
142 | * // { scope: 'all', shortcut: 'command+ctrl+shift+a', mods: [91, 17, 16], keys: [91, 17, 16, 65] },
143 | * // { scope: 'all', shortcut: 'f', mods: [], keys: [42] }
144 | * // ]
145 | * })
146 | * ```
147 | *
148 | */
149 | getAllKeyCodes: GetAllKeyCodes;
150 | isPressed: IsPressed;
151 | /**
152 | * By default hotkeys are not enabled for `INPUT` `SELECT` `TEXTAREA` elements.
153 | * `Hotkeys.filter` to return to the `true` shortcut keys set to play a role,
154 | * `false` shortcut keys set up failure.
155 | *
156 | * ```js
157 | * hotkeys.filter = function(event){
158 | * return true;
159 | * }
160 | * //How to add the filter to edit labels.
161 | * //"contentEditable" Older browsers that do not support drops
162 | * hotkeys.filter = function(event) {
163 | * var target = event.target || event.srcElement;
164 | * var tagName = target.tagName;
165 | * return !(target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
166 | * }
167 | *
168 | * hotkeys.filter = function(event){
169 | * var tagName = (event.target || event.srcElement).tagName;
170 | * hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
171 | * return true;
172 | * }
173 | * ```
174 | */
175 | filter: Filter;
176 | /**
177 | * trigger shortcut key event
178 | *
179 | * ```js
180 | * hotkeys.trigger('ctrl+o');
181 | * hotkeys.trigger('ctrl+o', 'scope2');
182 | * ```
183 | */
184 | trigger: Trigger;
185 | /**
186 | * Unbinds a shortcut key event.
187 | *
188 | * ```js
189 | * hotkeys.unbind('ctrl+o');
190 | * hotkeys.unbind('ctrl+o', 'scope1');
191 | * hotkeys.unbind('ctrl+o', 'scope1', method);
192 | * hotkeys.unbind('ctrl+o', method);
193 | * ```
194 | */
195 | unbind: Unbind;
196 | /**
197 | * Relinquish HotKeys’s control of the `hotkeys` variable.
198 | *
199 | * ```js
200 | * var k = hotkeys.noConflict();
201 | * k('a', function() {
202 | * console.log("do something")
203 | * });
204 | *
205 | * hotkeys()
206 | * // -->Uncaught TypeError: hotkeys is not a function(anonymous function)
207 | * // @ VM2170:2InjectedScript._evaluateOn
208 | * // @ VM2165:883InjectedScript._evaluateAndWrap
209 | * // @ VM2165:816InjectedScript.evaluate @ VM2165:682
210 | * ```
211 | */
212 | noConflict: NoConflict;
213 |
214 | keyMap: Record3. ES Module Format Test (hotkeys-js.js)
52 |Press F3 to test ES Module version
53 |Loading...
54 | Note: This test requires a server environment to work properly due to module loading restrictions in browsers.
55 |
118 | onKeyBoardMouseDown(item)}
178 | onMouseUp={onKeyBoardMouseUp}
179 | keyCode={keyCode}
180 | />
181 |
210 | );
211 | }
212 |
--------------------------------------------------------------------------------
/dist/index.d.ts:
--------------------------------------------------------------------------------
1 | declare const _default: HotkeysInterface;
2 | export default _default;
3 |
4 | declare type DeleteScope = (scope?: string, newScope?: string) => void;
5 |
6 | declare type Filter = (event: KeyboardEvent) => boolean;
7 |
8 | declare type GetAllKeyCodes = () => KeyCodeInfo[];
9 |
10 | declare type GetPressedKeyCodes = () => number[];
11 |
12 | declare type GetPressedKeyString = () => string[];
13 |
14 | declare type GetScope = () => string;
15 |
16 | declare interface HotkeysAPI {
17 | /**
18 | * Use the `hotkeys.setScope` method to set scope. There can only be one active scope besides 'all'. By default 'all' is always active.
19 | *
20 | * ```js
21 | * // Define shortcuts with a scope
22 | * hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function() {
23 | * console.log('do something');
24 | * });
25 | * hotkeys('o, enter', 'files', function() {
26 | * console.log('do something else');
27 | * });
28 | *
29 | * // Set the scope (only 'all' and 'issues' shortcuts will be honored)
30 | * hotkeys.setScope('issues'); // default scope is 'all'
31 | * ```
32 | */
33 | setScope: SetScope;
34 | /**
35 | * Use the `hotkeys.getScope` method to get scope.
36 | *
37 | * ```js
38 | * hotkeys.getScope();
39 | * ```
40 | */
41 | getScope: GetScope;
42 | /**
43 | * Use the `hotkeys.deleteScope` method to delete a scope. This will also remove all associated hotkeys with it.
44 | *
45 | * ```js
46 | * hotkeys.deleteScope('issues');
47 | * ```
48 | * You can use second argument, if need set new scope after deleting.
49 | *
50 | * ```js
51 | * hotkeys.deleteScope('issues', 'newScopeName');
52 | * ```
53 | */
54 | deleteScope: DeleteScope;
55 | /**
56 | * Returns an array of key codes currently pressed.
57 | *
58 | * ```js
59 | * hotkeys('command+ctrl+shift+a,f', function() {
60 | * console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] or [70]
61 | * })
62 | * ```
63 | */
64 | getPressedKeyCodes: GetPressedKeyCodes;
65 | /**
66 | * Returns an array of key codes currently pressed.
67 | *
68 | * ```js
69 | * hotkeys('command+ctrl+shift+a,f', function() {
70 | * console.log(hotkeys.getPressedKeyString()); //=> ['⌘', '⌃', '⇧', 'A', 'F']
71 | * })
72 | * ```
73 | */
74 | getPressedKeyString: GetPressedKeyString;
75 | /**
76 | * Get a list of all registration codes.
77 | *
78 | * ```js
79 | * hotkeys('command+ctrl+shift+a,f', function() {
80 | * console.log(hotkeys.getAllKeyCodes());
81 | * // [
82 | * // { scope: 'all', shortcut: 'command+ctrl+shift+a', mods: [91, 17, 16], keys: [91, 17, 16, 65] },
83 | * // { scope: 'all', shortcut: 'f', mods: [], keys: [42] }
84 | * // ]
85 | * })
86 | * ```
87 | *
88 | */
89 | getAllKeyCodes: GetAllKeyCodes;
90 | isPressed: IsPressed;
91 | /**
92 | * By default hotkeys are not enabled for `INPUT` `SELECT` `TEXTAREA` elements.
93 | * `Hotkeys.filter` to return to the `true` shortcut keys set to play a role,
94 | * `false` shortcut keys set up failure.
95 | *
96 | * ```js
97 | * hotkeys.filter = function(event){
98 | * return true;
99 | * }
100 | * //How to add the filter to edit labels.
101 | * //"contentEditable" Older browsers that do not support drops
102 | * hotkeys.filter = function(event) {
103 | * var target = event.target || event.srcElement;
104 | * var tagName = target.tagName;
105 | * return !(target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
106 | * }
107 | *
108 | * hotkeys.filter = function(event){
109 | * var tagName = (event.target || event.srcElement).tagName;
110 | * hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
111 | * return true;
112 | * }
113 | * ```
114 | */
115 | filter: Filter;
116 | /**
117 | * trigger shortcut key event
118 | *
119 | * ```js
120 | * hotkeys.trigger('ctrl+o');
121 | * hotkeys.trigger('ctrl+o', 'scope2');
122 | * ```
123 | */
124 | trigger: Trigger;
125 | /**
126 | * Unbinds a shortcut key event.
127 | *
128 | * ```js
129 | * hotkeys.unbind('ctrl+o');
130 | * hotkeys.unbind('ctrl+o', 'scope1');
131 | * hotkeys.unbind('ctrl+o', 'scope1', method);
132 | * hotkeys.unbind('ctrl+o', method);
133 | * ```
134 | */
135 | unbind: Unbind;
136 | /**
137 | * Relinquish HotKeys’s control of the `hotkeys` variable.
138 | *
139 | * ```js
140 | * var k = hotkeys.noConflict();
141 | * k('a', function() {
142 | * console.log("do something")
143 | * });
144 | *
145 | * hotkeys()
146 | * // -->Uncaught TypeError: hotkeys is not a function(anonymous function)
147 | * // @ VM2170:2InjectedScript._evaluateOn
148 | * // @ VM2165:883InjectedScript._evaluateAndWrap
149 | * // @ VM2165:816InjectedScript.evaluate @ VM2165:682
150 | * ```
151 | */
152 | noConflict: NoConflict;
153 | keyMap: Record
119 |
136 |
138 | {keyStr.length > -1 && (
139 |
140 | {keyStr.map((item) => (
141 | {item}
142 | ))}
143 |
144 | )}
145 |
150 | HotKeys.js
151 |
171 |
175 |
172 | {isChineseDoc ? chineseDescription : englishDescription}
173 |
174 |
2 | 使用我的应用也是一种支持我的方式：
3 |
4 |
5 | 
6 | 
7 | 
8 | 
9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 
19 | 
20 | 
21 | 
22 | 
23 | 
24 | 
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 |
35 | 4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 36 | 37 | # Hotkeys 38 | 39 | 40 | 41 | [](https://jaywcjlove.github.io/#/sponsor) 42 | [](https://www.npmjs.com/package/hotkeys-js) 43 | [](https://github.com/jaywcjlove/hotkeys/stargazers) 44 |  45 | [](https://github.com/jaywcjlove/hotkeys-js/actions/workflows/ci.yml) 46 | [](https://coveralls.io/github/jaywcjlove/hotkeys?branch=master) 47 | [](https://jaywcjlove.github.io/hotkeys-js/) 48 | [](https://gitee.com/jaywcjlove/hotkeys) 49 | 50 | HotKeys.js 是一个具有一些非常特殊功能的输入捕获库，它易于上手和使用，占用空间合理（[~6kB](https://bundlephobia.com/result?p=hotkeys-js)）（压缩后：**`2.8kB`**），无依赖。它不应该干扰任何 JavaScript 库或框架。官方文档 [演示预览](https://jaywcjlove.github.io/hotkeys-js)。[更多示例](https://github.com/jaywcjlove/hotkeys-js/issues?q=label%3ADemo+)。 51 | 52 | ```bash 53 | ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ 54 | ┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈. 55 | ┆ ┆┆ □ ┆┆ ┈┤┆ < ┆ -__┘┆ ┆ ┆┆__ ┈┈┤ 56 | ╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈ ┆╰┈┈┈┈┈╯ 57 | ╰┈┈┈┈┈╯ 58 | ``` 59 | 60 | ## 使用 61 | 62 | 您的系统需要安装 `Node.js`。 63 | 64 | ```bash 65 | npm install hotkeys-js --save 66 | ``` 67 | 68 | ```js 69 | import hotkeys from 'hotkeys-js'; 70 | 71 | hotkeys('f5', function(event, handler){ 72 | // 阻止 WINDOWS 系统下的默认刷新事件 73 | event.preventDefault() 74 | alert('你按下了 F5!') 75 | }); 76 | ``` 77 | 78 | ### 浏览器使用 79 | 80 | 或者手动下载并在 HTML 中链接 **hotkeys.js**。该库提供了不同格式以满足不同的使用需求： 81 | 82 | **CDN 链接：** [UNPKG](https://unpkg.com/hotkeys-js/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/hotkeys-js/) | [Githack](https://raw.githack.com/jaywcjlove/hotkeys/master/dist/) | [Statically](https://cdn.statically.io/gh/jaywcjlove/hotkeys/master/dist/) 83 | 84 | **可用格式：** 85 | 86 | **IIFE（立即调用函数表达式）- 推荐用于直接浏览器使用：** 87 | 88 | ```html 89 | 91 | 106 | ``` 107 | 108 | **UMD（通用模块定义）- 用于 CommonJS/AMD 环境：** 109 | 110 | ```html 111 | 113 | ``` 114 | 115 | **ES 模块 - 用于支持模块的现代浏览器：** 116 | 117 | ```html 118 | 124 | ``` 125 | 126 | ### 在 React 中使用 127 | 128 | [react-hotkeys](https://github.com/jaywcjlove/react-hotkeys) 是监听 keydown 和 keyup 键盘事件的 React 组件，定义和调度键盘快捷键。详细的使用方法请查看其文档 [react-hotkeys](https://github.com/jaywcjlove/react-hotkeys)。 129 | [react-hotkeys-hook](https://github.com/JohannesKlauss/react-hotkeys-hook) - 在组件中使用键盘快捷键的 React hook。请确保您至少安装了 react 和 react-dom 的 16.8 版本，否则 hooks 将不会为您工作。 130 | 131 | ## 浏览器支持 132 | 133 | Hotkeys.js 已经过测试，应该在以下浏览器中工作。 134 | 135 | ```shell 136 | Internet Explorer 6+ 137 | Safari 138 | Firefox 139 | Chrome 140 | ``` 141 | 142 | ## 支持的按键 143 | 144 | HotKeys 理解以下修饰符：`⇧`、`shift`、`option`、`⌥`、`alt`、`ctrl`、`control`、`command` 和 `⌘`。 145 | 146 | 以下特殊按键可用于快捷键：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。 147 | 148 | `⌘` Command() 149 | `⌃` Control 150 | `⌥` Option(alt) 151 | `⇧` Shift 152 | `⇪` Caps Lock(Capital) 153 | ~~`fn` 不支持 fn~~ 154 | `↩︎` return/Enter space 155 | 156 | ## 定义快捷键 157 | 158 | 暴露了一个全局方法，当直接调用时定义快捷键。 159 | 160 | ```js 161 | declare interface HotkeysInterface extends HotkeysAPI { 162 | (key: string, method: KeyHandler): void; 163 | (key: string, scope: string, method: KeyHandler): void; 164 | (key: string, option: HotkeysOptions, method: KeyHandler): void; 165 | shift?: boolean; 166 | ctrl?: boolean; 167 | alt?: boolean; 168 | option?: boolean; 169 | control?: boolean; 170 | cmd?: boolean; 171 | command?: boolean; 172 | } 173 | ``` 174 | 175 | ```js 176 | hotkeys('f5', function(event, handler) { 177 | // 阻止 WINDOWS 系统下的默认刷新事件 178 | event.preventDefault(); 179 | alert('你按下了 F5!'); 180 | }); 181 | 182 | // 返回 false 停止事件并阻止默认浏览器事件 183 | // Mac OS 系统将 `command + r` 定义为刷新快捷键 184 | hotkeys('ctrl+r, command+r', function() { 185 | alert('停止刷新!'); 186 | return false; 187 | }); 188 | 189 | // 单个按键 190 | hotkeys('a', function(event,handler){ 191 | //event.srcElement: input 192 | //event.target: input 193 | if(event.target === "input"){ 194 | alert('你按下了 a!') 195 | } 196 | alert('你按下了 a!') 197 | }); 198 | 199 | // 组合键 200 | hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){ 201 | switch (handler.key) { 202 | case 'ctrl+a': alert('你按下了 ctrl+a!'); 203 | break; 204 | case 'ctrl+b': alert('你按下了 ctrl+b!'); 205 | break; 206 | case 'r': alert('你按下了 r!'); 207 | break; 208 | case 'f': alert('你按下了 f!'); 209 | break; 210 | default: alert(event); 211 | } 212 | }); 213 | 214 | hotkeys('ctrl+a+s', function() { 215 | alert('你按下了 ctrl+a+s!'); 216 | }); 217 | 218 | // 使用作用域 219 | hotkeys('*','wcj', function(event){ 220 | console.log('做一些事情', event); 221 | }); 222 | ``` 223 | 224 | #### option 选项 225 | 226 | - `scope
522 |
523 |
524 | 使用 [action-contributors](https://github.com/jaywcjlove/github-action-contributors) 制作。
525 |
526 | 特别感谢 [@dimensi](https://github.com/dimensi) 对版本 [4.0](https://github.com/jaywcjlove/hotkeys-js/issues/313) 的重构。
527 |
528 | ## 许可证
529 |
530 | [MIT © Kenny Wong](./LICENSE)
531 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | Using my app is also a way to support me:
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 36 | 37 | # Hotkeys 38 | 39 | [](https://jaywcjlove.github.io/#/sponsor) 40 | [](https://www.npmjs.com/package/hotkeys-js) 41 | [](https://github.com/jaywcjlove/hotkeys/stargazers) 42 |  43 | [](https://github.com/jaywcjlove/hotkeys-js/actions/workflows/ci.yml) 44 | [](https://coveralls.io/github/jaywcjlove/hotkeys?branch=master) 45 | [](https://wangchujiang.com/hotkeys-js/?lang=zh) 46 | [](https://gitee.com/jaywcjlove/hotkeys) 47 | 48 | HotKeys.js is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint ([~6kB](https://bundlephobia.com/result?p=hotkeys-js)) (gzipped: **`2.8kB`**), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks. Official document [demo preview](https://jaywcjlove.github.io/hotkeys-js). [More examples](https://github.com/jaywcjlove/hotkeys-js/issues?q=label%3ADemo+). 49 | 50 | ```bash 51 | ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ 52 | ┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈. 53 | ┆ ┆┆ □ ┆┆ ┈┤┆ < ┆ -__┘┆ ┆ ┆┆__ ┈┈┤ 54 | ╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈ ┆╰┈┈┈┈┈╯ 55 | ╰┈┈┈┈┈╯ 56 | ``` 57 | 58 | ## Usage 59 | 60 | You will need `Node.js` installed on your system. 61 | 62 | ```bash 63 | npm install hotkeys-js --save 64 | ``` 65 | 66 | ```js 67 | import hotkeys from 'hotkeys-js'; 68 | 69 | hotkeys('f5', function(event, handler){ 70 | // Prevent the default refresh event under WINDOWS system 71 | event.preventDefault() 72 | alert('you pressed F5!') 73 | }); 74 | ``` 75 | 76 | ### Browser Usage 77 | 78 | Or manually download and link **hotkeys.js** in your HTML. The library provides different formats for different use cases: 79 | 80 | **CDN Links:** [UNPKG](https://unpkg.com/hotkeys-js/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/hotkeys-js/) | [Githack](https://raw.githack.com/jaywcjlove/hotkeys/master/dist/) | [Statically](https://cdn.statically.io/gh/jaywcjlove/hotkeys/master/dist/) 81 | 82 | **Available Formats:** 83 | 84 | **IIFE (Immediately Invoked Function Expression) - Recommended for direct browser usage:** 85 | 86 | ```html 87 | 88 | 103 | ``` 104 | 105 | **UMD (Universal Module Definition) - For CommonJS/AMD environments:** 106 | 107 | ```html 108 | 109 | ``` 110 | 111 | **ES Module - For modern browsers with module support:** 112 | 113 | ```html 114 | 120 | ``` 121 | 122 | ### Used in React 123 | 124 | [react-hotkeys](https://github.com/jaywcjlove/react-hotkeys) is the React component that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. Detailed use method please see its documentation [react-hotkeys](https://github.com/jaywcjlove/react-hotkeys). 125 | 126 | [react-hotkeys-hook](https://github.com/JohannesKlauss/react-hotkeys-hook) - React hook for using keyboard shortcuts in components. Make sure that you have at least version 16.8 of react and react-dom installed, or otherwise hooks won't work for you. 127 | 128 | ## Browser Support 129 | 130 | Hotkeys.js has been tested and should work in. 131 | 132 | ```shell 133 | Internet Explorer 6+ 134 | Safari 135 | Firefox 136 | Chrome 137 | ``` 138 | 139 | ## Supported Keys 140 | 141 | HotKeys understands the following modifiers: `⇧`, `shift`, `option`, `⌥`, `alt`, `ctrl`, `control`, `command`, and `⌘`. 142 | 143 | The following special keys can be used for shortcuts: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete, f1 through f19, num_0 through num_9, num_multiply, num_add, num_enter, num_subtract, num_decimal, num_divide. 144 | 145 | `⌘` Command() 146 | `⌃` Control 147 | `⌥` Option(alt) 148 | `⇧` Shift 149 | `⇪` Caps Lock(Capital) 150 | ~~`fn` Does not support fn~~ 151 | `↩︎` return/Enter space 152 | 153 | ## Defining Shortcuts 154 | 155 | One global method is exposed, key which defines shortcuts when called directly. 156 | 157 | ```js 158 | declare interface HotkeysInterface extends HotkeysAPI { 159 | (key: string, method: KeyHandler): void; 160 | (key: string, scope: string, method: KeyHandler): void; 161 | (key: string, option: HotkeysOptions, method: KeyHandler): void; 162 | shift?: boolean; 163 | ctrl?: boolean; 164 | alt?: boolean; 165 | option?: boolean; 166 | control?: boolean; 167 | cmd?: boolean; 168 | command?: boolean; 169 | } 170 | ``` 171 | 172 | 173 | ```js 174 | hotkeys('f5', function(event, handler) { 175 | // Prevent the default refresh event under WINDOWS system 176 | event.preventDefault(); 177 | alert('you pressed F5!'); 178 | }); 179 | 180 | // Returning false stops the event and prevents default browser events 181 | // Mac OS system defines `command + r` as a refresh shortcut 182 | hotkeys('ctrl+r, command+r', function() { 183 | alert('stopped reload!'); 184 | return false; 185 | }); 186 | 187 | // Single key 188 | hotkeys('a', function(event,handler){ 189 | //event.srcElement: input 190 | //event.target: input 191 | if(event.target === "input"){ 192 | alert('you pressed a!') 193 | } 194 | alert('you pressed a!') 195 | }); 196 | 197 | // Key Combination 198 | hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){ 199 | switch (handler.key) { 200 | case 'ctrl+a': alert('you pressed ctrl+a!'); 201 | break; 202 | case 'ctrl+b': alert('you pressed ctrl+b!'); 203 | break; 204 | case 'r': alert('you pressed r!'); 205 | break; 206 | case 'f': alert('you pressed f!'); 207 | break; 208 | default: alert(event); 209 | } 210 | }); 211 | 212 | hotkeys('ctrl+a+s', function() { 213 | alert('you pressed ctrl+a+s!'); 214 | }); 215 | 216 | // Using a scope 217 | hotkeys('*','wcj', function(event){ 218 | console.log('do something', event); 219 | }); 220 | ``` 221 | 222 | #### option 223 | 224 | - `scope
521 |
522 |
523 | Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
524 |
525 | Special thanks to [@dimensi](https://github.com/dimensi) for the refactoring of version [4.0](https://github.com/jaywcjlove/hotkeys-js/issues/313).
526 |
527 | ## License
528 |
529 | [MIT © Kenny Wong](./LICENSE)
530 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import {
2 | KeyCodeInfo,
3 | HotkeysEvent,
4 | UnbindInfo,
5 | HotkeysOptions,
6 | KeyHandler,
7 | HotkeysInterface,
8 | SetScope,
9 | GetScope,
10 | GetPressedKeyCodes,
11 | GetPressedKeyString,
12 | GetAllKeyCodes,
13 | Filter,
14 | IsPressed,
15 | DeleteScope,
16 | Unbind,
17 | HotkeysAPI,
18 | } from './types';
19 | import { addEvent, removeEvent, getMods, getKeys, compareArray, getLayoutIndependentKeyCode } from './utils';
20 | import { _keyMap, _modifier, modifierMap, _mods, _handlers } from './var';
21 |
22 | /** Record the pressed keys */
23 | let _downKeys: number[] = [];
24 | /** Whether the window has already listened to the focus event */
25 | let winListendFocus: { listener: EventListener; capture: boolean } | null =
26 | null;
27 | /** Default hotkey scope */
28 | let _scope: string = 'all';
29 | /** Map to record elements with bound events */
30 | const elementEventMap = new Map<
31 | HTMLElement | Document,
32 | {
33 | keydownListener: EventListener;
34 | keyupListenr: EventListener;
35 | capture: boolean;
36 | }
37 | >();
38 |
39 | /** Return key code */
40 | const code = (x: string): number =>
41 | _keyMap[x.toLowerCase()] ||
42 | _modifier[x.toLowerCase()] ||
43 | x.toUpperCase().charCodeAt(0);
44 |
45 | const getKey = (x: number): string | undefined =>
46 | Object.keys(_keyMap).find((k) => _keyMap[k] === x);
47 | const getModifier = (x: number): string | undefined =>
48 | Object.keys(_modifier).find((k) => _modifier[k] === x);
49 |
50 | /** Set or get the current scope (defaults to 'all') */
51 | const setScope: SetScope = (scope) => {
52 | _scope = scope || 'all';
53 | };
54 | /** Get the current scope */
55 | const getScope: GetScope = () => {
56 | return _scope || 'all';
57 | };
58 | /** Get the key codes of the currently pressed keys */
59 | const getPressedKeyCodes: GetPressedKeyCodes = () => {
60 | return _downKeys.slice(0);
61 | };
62 |
63 | const getPressedKeyString: GetPressedKeyString = () => {
64 | return _downKeys.map(
65 | (c) => getKey(c) || getModifier(c) || String.fromCharCode(c)
66 | );
67 | };
68 |
69 | const getAllKeyCodes: GetAllKeyCodes = () => {
70 | const result: KeyCodeInfo[] = [];
71 | Object.keys(_handlers).forEach((k) => {
72 | _handlers[k].forEach(({ key, scope, mods, shortcut }) => {
73 | result.push({
74 | scope,
75 | shortcut,
76 | mods,
77 | keys: key.split('+').map((v) => code(v)),
78 | });
79 | });
80 | });
81 | return result;
82 | };
83 |
84 | /** hotkey is effective only when filter return true */
85 | const filter: Filter = (event) => {
86 | const target = (event.target || event.srcElement) as HTMLElement;
87 | const { tagName } = target;
88 | let flag = true;
89 | const isInput =
90 | tagName === 'INPUT' &&
91 | ![
92 | 'checkbox',
93 | 'radio',
94 | 'range',
95 | 'button',
96 | 'file',
97 | 'reset',
98 | 'submit',
99 | 'color',
100 | ].includes((target as HTMLInputElement).type);
101 | // ignore: isContentEditable === 'true', and