js简单的设置快捷键，hotkeys捕获键盘键和组合键的输入

设置快捷键

创建

1 # bower 安装
2 $ bower install hotkeysjs
3
4 # npm 安装
5 $ npm install hotkeys-js
6
7 # 在页面上引用需要压缩的话，运行
8 $ grunt dist
9
10 # 在dist目录中生成下列文件：
11 # dist/hotkeys.js
12 # dist/hotkeys.min.js
13 # dist/hotkeys.min.map

定义快捷键

1 // 定义a快捷键
2 hotkeys('a', function(event,handler){
3     //event.srcElement: input
4     //event.target: input
5     if(event.target === "input"){
6         alert('你在输入框中按下了 a!')
7     }
8     alert('你按下了 a!')
9 });
10
11 // 定义a快捷键
12 hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
13     switch(handler.key){
14         case "ctrl+a":alert('你按下了ctrl+a!');break;
15         case "ctrl+b":alert('你按下了ctrl+b!');break;
16         case "r":alert('你按下了r!');break;
17         case "f":alert('你按下了f!');break;
18     }
19     //handler.scope 范围
20 });
21
22 // 返回false将停止活动，并阻止默认浏览器事件
23 hotkeys('ctrl+r', function(){ alert('停止刷新!'); return false });
24
25 // 多个快捷方式做同样的事情
26 hotkeys('⌘+r, ctrl+r', function(){ });
27
28 // 对所有摁键执行任务
29 hotkeys('*','wcj', function(e){
30     console.log('干点活儿',e);
31     console.log("key.getScope()::",hotkeys.getScope());
32     if(hotkeys.shift) console.log('大哥你摁下了 shift 键！');
33     if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！');
34     if(hotkeys.alt) console.log('大哥你摁下了 alt 键！');
35 });

支持的键

⇧, shift, option, ⌥, alt, ctrl, control, command, ⌘。

⌘ Command()
⌃ Control
⌥ Option(alt)
⇧ Shift
⇪ Caps Lock(大写)
fn 功能键就是fn(不支持)
↩︎ return/Enter
space 空格键

修饰键判断

shift

alt

option

ctrl

control

command

1 hotkeys('shift+a,alt+d, w', function(e){
2     console.log('干点活儿',e);
3     if(hotkeys.shift) console.log('大哥你摁下了 shift 键！');
4     if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！');
5     if(hotkeys.alt) console.log('大哥你摁下了 alt 键！');
6 });

切换快捷键

1 // 一个快捷键，有可能干的活儿不一样哦
2 hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){
3     console.log('干点活儿');
4 });
5 hotkeys('o, enter', 'files', function(){
6     console.log('另一种活儿');
7 });
8
9 // 设定范围scope
10 hotkeys.setScope('issues'); // 默认所有事儿都干哦

删除标记快捷键

hotkeys.deleteScope('issues');

解除绑定

1 hotkeys.unbind("ctrl+o, ctrl+alt+enter") 解除绑定两组快捷键
2 hotkeys.unbind("ctrl+o","files") 解除绑定名字叫files钟的一组快捷键

键判断

1 hotkeys('a', function(){
2     console.log(hotkeys.isPressed("A")); //=> true
3     console.log(hotkeys.isPressed(65)); //=> true
4 });

获取摁下键值

1 获取摁下绑定键的键值 hotkeys.getPressedKeyCodes()

1 hotkeys('command+ctrl+shift+a,f', function(){
2     console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] 或者 [70]
3 })

过滤

INPUT SELECT TEXTAREA 默认不处理。
hotkeys.filter 返回 true 快捷键设置才会起作用，flase 快捷键设置失效。

1 hotkeys.filter = function(event){
2   return true;
3 }
4 //如何增加过滤可编辑标签 <div contentEditable="true"></div>
5 //contentEditable老浏览器不支持滴
6 hotkeys.filter = function(event) {
7     var tagName = (event.target || event.srcElement).tagName;
8     return !(tagName.isContentEditable ||
9     tagName == 'INPUT' ||
10     tagName == 'SELECT' ||
11     tagName == 'TEXTAREA');
12 }
13
14 //
15 hotkeys.filter = function(event){
16     var tagName = (event.target || event.srcElement).tagName;
17     hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
18     return true;
19 }

兼容模式

1 var k = hotkeys.noConflict();
2 k('a', function() {
3     console.log("这里可以干一些事儿")
4 });
5
6 hotkeys()
7 // -->Uncaught TypeError: hotkeys is not a function(anonymous function)
8 // @ VM2170:2InjectedScript._evaluateOn
9 // @ VM2165:883InjectedScript._evaluateAndWrap
10 // @ VM2165:816InjectedScript.evaluate @ VM2165:682