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

时间：2024-03-11 22:26:57

设置快捷键

这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键，它没有依赖，压缩只有只有(~3kb)。

hotkeys on Github
hotkeys预览

创建

您将需要在您的系统上安装的 Node.js。

 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 });

切换快捷键

如果在单页面在不同的区域，相同的快捷键，干不同的事儿，之间来回切换。O(∩_∩)O ！

 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

 

相关文章