HotKeys.js 2.0.2 发布,捕获键盘输入和输入的组合键 - 开源中国社区
HotKeys.js 2.0.2 发布,捕获键盘输入和输入的组合键
同一种调调 2017年08月16日

HotKeys.js 2.0.2 发布,捕获键盘输入和输入的组合键

同一种调调 同一种调调 发布于2017年08月16日 收藏 75

有免费的MySQL,为什么还要买? >>>  

这是一个强健的 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 键!');
});

支持的键

shiftoptionaltctrlcontrolcommand

 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

下载地址:

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 开源中国社区 [http://www.oschina.net]
本文标题:HotKeys.js 2.0.2 发布,捕获键盘输入和输入的组合键
分享
评论(16)
精彩评论
1
HotKeys 的详细介绍:点击查看 https://github.com/jaywcjlove/hotkeys
HotKeys 的下载地址:点击下载 https://github.com/jaywcjlove/hotkeys

地址居然错了,新闻白发了 。。
最新评论
0

引用来自“zigzagroad”的评论

建议:1、做隔离封装,避免代码污染或被污染。2、主动规避重复引入相同js包问题。

引用来自“同一种调调”的评论

看 `dist` 目录里面的代码, 编译后的代码加了 添加UMD支持,不会污染的
哦,好,隔离了就好。(我只看了src中的代码)
0

引用来自“zigzagroad”的评论

建议:1、做隔离封装,避免代码污染或被污染。2、主动规避重复引入相同js包问题。
看 `dist` 目录里面的代码, 编译后的代码加了 添加UMD支持,不会污染的
0
超赞 Mark
0
// 主动规避重复引入相同js包问题
if (window.hotkeys != null) {
return;
}
(function() {
// 做隔离封装,避免代码污染或被污染:全部代码放入此处
....

window.hotkeys = xxx;
})();
0
建议:1、做隔离封装,避免代码污染或被污染。2、主动规避重复引入相同js包问题。
0

引用来自“同一种调调”的评论

HotKeys 的详细介绍:点击查看 https://github.com/jaywcjlove/hotkeys
HotKeys 的下载地址:点击下载 https://github.com/jaywcjlove/hotkeys

地址居然错了,新闻白发了 。。

引用来自“局长”的评论

还有个问题,软件的更新资讯以后就不需要在贴一遍文档这些了,因为读者可以在点击底下项目的详细介绍进去了解。

引用来自“同一种调调”的评论

了解了以后更新,只发更新内容。

引用来自“局长”的评论

good!! 还有 要不改一下 快速设置快捷键,键盘输入捕捉 JavaScript 库 这个项目名吧,实在是太长了:joy:
没问题。专业:grimacing:
0

引用来自“同一种调调”的评论

HotKeys 的详细介绍:点击查看 https://github.com/jaywcjlove/hotkeys
HotKeys 的下载地址:点击下载 https://github.com/jaywcjlove/hotkeys

地址居然错了,新闻白发了 。。

引用来自“局长”的评论

还有个问题,软件的更新资讯以后就不需要在贴一遍文档这些了,因为读者可以在点击底下项目的详细介绍进去了解。

引用来自“同一种调调”的评论

了解了以后更新,只发更新内容。
good!! 还有 要不改一下 快速设置快捷键,键盘输入捕捉 JavaScript 库 这个项目名吧,实在是太长了:joy:
0

引用来自“同一种调调”的评论

HotKeys 的详细介绍:点击查看 https://github.com/jaywcjlove/hotkeys
HotKeys 的下载地址:点击下载 https://github.com/jaywcjlove/hotkeys

地址居然错了,新闻白发了 。。

引用来自“局长”的评论

还有个问题,软件的更新资讯以后就不需要在贴一遍文档这些了,因为读者可以在点击底下项目的详细介绍进去了解。
了解了以后更新,只发更新内容。
0

引用来自“桃源人”的评论

真的很赞
:punch:
0

引用来自“同一种调调”的评论

代码排版乱了,排版了一晚上...

引用来自“局长”的评论

地址错是因为你关联的软件错了,已改正。排版也修改了。
错过了头版头条😆
0

引用来自“同一种调调”的评论

HotKeys 的详细介绍:点击查看 https://github.com/jaywcjlove/hotkeys
HotKeys 的下载地址:点击下载 https://github.com/jaywcjlove/hotkeys

地址居然错了,新闻白发了 。。
还有个问题,软件的更新资讯以后就不需要在贴一遍文档这些了,因为读者可以在点击底下项目的详细介绍进去了解。
0

引用来自“同一种调调”的评论

代码排版乱了,排版了一晚上...
地址错是因为你关联的软件错了,已改正。排版也修改了。
1
HotKeys 的详细介绍:点击查看 https://github.com/jaywcjlove/hotkeys
HotKeys 的下载地址:点击下载 https://github.com/jaywcjlove/hotkeys

地址居然错了,新闻白发了 。。
0
代码排版乱了,排版了一晚上...
0
真的很赞
0
这个挺好的
顶部