HotKeys.js 2.0.2 发布，捕获键盘输入和输入的组合键
发布于 2017-08-16 08:59:29 | 167 次阅读 | 评论: 0 | 来源: 网友投递
Hotkeys 快速设置快捷键，键盘输入捕捉 JavaScript 库
Hotkey 是用来捕捉键盘输入的 JavaScript 库。
这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键，它没有依赖，压缩只有只有(~3kb)，gzip:1.9k。
更新内容：
1. 添加测试用例；
2. 添加更多特殊键支持；
3. 事件修复bug。
__ __ __ | |--..-----.| |_ | |--..-----..--.--..-----. | || _ || _|| < | -__|| | ||__ --| |__|__||_____||____||__|__||_____||___ ||_____| |_____|
使用
传统调用
<script type="text/javascript" src="./js/hotkeys.js"></script>
包加载
import hotkeys from 'hotkeys-js'; hotkeys('shift+a,alt+d, w', function(e){ console.log('干点活儿',e); if(hotkeys.shift) console.log('大哥你摁下了 shift 键！'); if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！'); if(hotkeys.alt) console.log('大哥你摁下了 alt 键！'); });
定义快捷键
// 定义a快捷键 hotkeys('a', function(event,handler){ //event.srcElement: input //event.target: input if(event.target === "input"){ alert('你在输入框中按下了 a!') } alert('你按下了 a!') }); // 定义a快捷键 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; } //handler.scope 范围 }); // 返回false将停止活动，并阻止默认浏览器事件 hotkeys('ctrl+r', function(){ alert('停止刷新!'); return false }); // 多个快捷方式做同样的事情 hotkeys('⌘+r, ctrl+r', function(){ }); // 对所有摁键执行任务 hotkeys('*','wcj', function(e){ console.log('干点活儿',e); console.log("key.getScope()::",hotkeys.getScope()); if(hotkeys.shift) console.log('大哥你摁下了 shift 键！'); if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！'); if(hotkeys.alt) console.log('大哥你摁下了 alt 键！'); });
支持的键
⇧, shift, option, ⌥, alt, ctrl, control, command, ⌘。
⌘ Command()
⌃ Control
⌥ Option(alt)
⇧ Shift
⇪ Caps Lock(大写)
fn 功能键就是fn(不支持)
↩︎ return/enter space 空格键
修饰键判断
可以对下面的修饰键判断 shift alt option ctrl control command，特别注意+和=键值相同，组合键设置⌘+=
hotkeys('shift+a,alt+d, w', function(e){ console.log('干点活儿',e); if(hotkeys.shift) console.log('大哥你摁下了 shift 键！'); if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！'); if(hotkeys.alt) console.log('大哥你摁下了 alt 键！'); });
切换快捷键
如果在单页面在不同的区域，相同的快捷键，干不同的事儿，之间来回切换。O(∩_∩)O ！
// 一个快捷键，有可能干的活儿不一样哦 hotkeys('ctrl+o, ctrl+alt+enter', 'scope1', function(){ console.log('你好看'); }); hotkeys('ctrl+o, enter', 'scope2', function(){ console.log('你好丑陋啊！'); }); // 你摁 “ctrl+o”组合键 // 当scope等于 scope1 ，执行 回调事件打印出 “你好看”， // 当scope等于 scope2 ，执行 回调事件打印出 “你好丑陋啊！”， // 通过setScope设定范围scope hotkeys.setScope('scope1'); // 默认所有事儿都干哦
删除标记快捷键
删除区域范围标记
hotkeys.deleteScope('issues');
解除绑定
hotkeys.unbind("ctrl+o, ctrl+alt+enter") 解除绑定两组快捷键
hotkeys.unbind("ctrl+o","files") 解除绑定名字叫files钟的一组快捷键
键判断
判断摁下的键是否为某个键
hotkeys('a', function(){ console.log(hotkeys.isPressed("A")); //=> true console.log(hotkeys.isPressed(65)); //=> true });
获取摁下键值
获取摁下绑定键的键值 hotkeys.getPressedKeyCodes()
hotkeys('command+ctrl+shift+a,f', function(){ console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] 或者 [70] })
过滤
INPUT SELECT TEXTAREA 默认不处理。
hotkeys.filter 返回 true 快捷键设置才会起作用，flase 快捷键设置失效。
hotkeys.filter = function(event){ return true; } //如何增加过滤可编辑标签 <div contentEditable="true"></div> //contentEditable老浏览器不支持滴 hotkeys.filter = function(event) { var tagName = (event.target || event.srcElement).tagName; return !(tagName.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'); } // hotkeys.filter = function(event){ var tagName = (event.target || event.srcElement).tagName; hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other'); return true; }
兼容模式
var k = hotkeys.noConflict(); k('a', function() { console.log("这里可以干一些事儿") }); hotkeys() // -->Uncaught TypeError: hotkeys is not a function(anonymous function) // @ VM2170:2InjectedScript._evaluateOn // @ VM2165:883InjectedScript._evaluateAndWrap // @ VM2165:816InjectedScript.evaluate @ VM2165:682
下载地址：
历史版本 :
HotKeys.js 2.0.8 发布，定制组合快捷键
HotKeys.js 2.0.7 发布，设置快捷键，捕获键盘输入
HotKeys.js 2.0.5 发布，设置快捷键，捕获键盘输入
HotKeys.js 2.0.4 发布，设置快捷键，捕获键盘输入
React-Hotkeys v1.0.2 发布，React 版键盘捕捉 JS 库
HotKeys.js 2.0.3 发布，设置快捷键，键盘捕捉JS库
HotKeys.js 2.0.2 发布，捕获键盘输入和输入的组合键
Hotkeys.js 2.0.2 发布，捕获键盘输入和输入的组合键
推荐阅读
最新资讯