Hotkey 是用来捕捉键盘输入的 JavaScript 库。

预览:http://jslite.io/hotkeys/

设置快捷键

自定义快捷键没有依赖。这又是在重复造轮子,呵呵~!!

创建

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

npm 安装
$ Bower install Hotkeysjs


# npm 安装
$ npm install hotkeys-js


# 在页面上引用需要压缩的话,运行
$ Grunt dist


# 在dist目录中生成下列文件:
# dist/hotkeys.js
# dist/hotkeys.min.js
# dist/hotkeys.min.map

定义快捷键

// 定义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', 'issues', function(){
    console.log('干点活儿');
});
hotkeys('o, enter', 'files', function(){ 
    console.log('另一种活儿');
});


// 设定范围scope 
hotkeys.setScope('issues'); // 默认所有事儿都干哦

删除标记快捷键

删除区域范围标记

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;
}
//如何增加过滤可编辑标签 
//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.8 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。更新内容:49c6aef - 修复了Chrome中的自动填充功能 @clesquir

发布于 2018-01-05 03:52:26 | 124 次阅读

HotKeys.js 2.0.7 发布,设置快捷键,捕获键盘输入
HotKeys.js 2.0.7 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。更新内容:全局变量检查服务器端的渲染 1f93969 : @egorshar

发布于 2017-12-11 14:54:22 | 115 次阅读

HotKeys.js 2.0.5 发布,设置快捷键,捕获键盘输入
HotKeys.js 2.0.5 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。更新内容:修复浏览器兼容问题。 7311320 : @egorshar

发布于 2017-12-08 03:01:43 | 142 次阅读

HotKeys.js 2.0.4 发布,设置快捷键,捕获键盘输入
HotKeys.js 2.0.4 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。 更新内容:52eb11a - #13 修复backsapce键不工作的情况cc4aa9f - 代码格式化 文档更新。

发布于 2017-09-10 23:28:22 | 138 次阅读

React-Hotkeys v1.0.2 发布,React 版键盘捕捉 JS 库
这是一个基于hotkeys.js 的一个React版本,监听keydown和keyup,定义快捷键,捕获键盘输入和输入的组合键。更新内容:添加测试用例添加实例demo添加实例预览web界面web界面自动生成脚本代码覆盖率等更多内容

发布于 2017-08-18 05:28:46 | 141 次阅读

HotKeys.js 2.0.3 发布,设置快捷键,键盘捕捉JS库
这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。 更新内容: 1. 修复设置设置快捷键时报错;7245edc 2. 快捷键大小写忽略;30523a7 3.  Cmd + ,,,  特殊键的支持;30523a7 4.  cmd+command+c  快捷键的支持;30

发布于 2017-08-16 23:22:39 | 171 次阅读

HotKeys.js 2.0.2 发布,捕获键盘输入和输入的组合键
这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。更新内容:1. 添加测试用例;2. 添加更多特殊键支持;3. 事件修复bug。__            __    __     

发布于 2017-08-16 08:59:29 | 167 次阅读

Hotkeys.js 2.0.2 发布,捕获键盘输入和输入的组合键
这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。更新内容:1. 添加测试用例;2. 添加更多特殊键支持;3. 事件修复bug。__            __    __     

发布于 2017-08-16 00:32:36 | 125 次阅读


Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务