HotKeys 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
HotKeys 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
HotKeys 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript HTML/CSS
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 小弟调调
适用人群 未知
收录时间 2015-09-10

软件简介

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

预览:http://jaywcjlove.github.io/hotkeys/

使用

包加载

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 键!');
});

设置快捷键

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

创建

您将需要在您的系统上安装的 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 键!');
});

支持的键

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', '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
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(2)
发表于大前端专区
2019/05/08 00:38

HotKeys.js 3.6.6 发布,可定制三键组合快捷键

HotKeys.js 3.6.6 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(3.62kb)(gzipped: 1.73kb)。 更新内容 修复弹出输入法导致组合键失效问题。 #72 3bbefc8 修复无法单独测试 shift 问题。 #36 69a7267 支持三个键的多键组合快捷键。 #55 b0f5d3c 支持 keyup 参数设置监听弹起事件。 #57 修复:index.d.ts导出自定义对象,支持TypeScript。#30 #38 cbccf51 添加 TypeScript 类型...

0
29
发表于大前端专区
2019/03/31 00:44

HotKeys.js 3.6.2 发布,支持三个键组合快捷键

HotKeys.js 3.1.0 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有(3.62kb, gzipped: 1.73kb)。 更新内容 1. 修复新参数没有加入TypeScript类型文件中的问题。#59 da94c8b 2. 修改三个和两个键组合键的问题。 #55 efb4950 hotkeys('command+shift+z,command+z', function(event,handler) { console.log('handle', handler.key, event) }); 3. 支持三个键组合的快捷键。#55 b...

5
36
发表于大前端专区
2018/03/26 09:14

HotKeys.js 3.1.0 发布,定制组合快捷键

HotKeys.js 3.1.0 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(3.62kb)(gzipped: 1.73kb)。 更新内容 编译ES Module文件。 文档网站源码ESLint代码检测。 修改测试命令。 添加ESLint测试框架,以及测试用例 添加测试代码覆盖率 配置package.json中添加仓库地址 更新文档网站 更新文字logo...

4
10
发表于大前端专区
2018/03/21 10:50

HotKeys.js 3.0.0 发布,使用先进科技重构版本

HotKeys.js 3.0.0 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(3.62kb)(gzipped: 1.73kb) $ npm install hotkeys-js --save HotKeys.js 3.0.0是一个重构版本,预计全部使用ES6语法来完全重构它,同时也是一个新时代写lib的很好的手脚架,更新内容如下: 使用Chrome的工具puppeteer,无头浏览器,配合Jest做测试。 通Jest附带工具,添加测试覆盖率。 通过Rollup生成UMD...

9
17
发表于大前端专区
2018/03/19 11:08

React-Hotkeys v1.0.11 发布,React 版键盘捕捉 JS 库

React-Hotkeys v1.0.11已发布 。这是一个基于hotkeys.js的一个React版本,监听keydown和keyup,定义快捷键,捕获键盘输入和输入的组合键。 更新内容: 修复onKeyDown事件在HotKey组件被卸载之后还会触发一次的问题。

2
9
发表于大前端专区
2018/03/16 09:23

HotKeys.js 2.0.9 发布,定制组合快捷键

HotKeys.js 2.0.9 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。 更新内容: 支持 ins, insert 键

2
38
发表于大前端专区
2018/01/05 11:15

HotKeys.js 2.0.8 发布,定制组合快捷键

HotKeys.js 2.0.8 发布了,这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。 更新内容: 49c6aef - 修复了Chrome中的自动填充功能 @clesquir

5
18
发表了资讯
2017/12/11 22:43

React-Hotkeys v1.0.4 发布,React 版键盘捕捉 JS 库  

React-Hotkeys v1.0.4 发布 。这是一个基于hotkeys.js 的一个React版本,监听keydown和keyup,定义快捷键,捕获键盘输入和输入的组合键。 更新内容: 348b644 - 更新依赖hotkeys-js v2.0.5,修复服务端渲染问题。

0
6
发表了资讯
2017/12/11 21:41

HotKeys.js 2.0.7 发布,设置快捷键,捕获键盘输入

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

4
51
发表了资讯
2017/12/08 10:03

HotKeys.js 2.0.5 发布,设置快捷键,捕获键盘输入

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

4
59
发表了资讯
2017/09/10 19:45

HotKeys.js 2.0.4 发布,设置快捷键,捕获键盘输入

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

2
45
发表了资讯
2017/08/18 12:22

React-Hotkeys v1.0.2 发布,React 版键盘捕捉 JS 库

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

0
20
发表了资讯
2017/08/17 02:15

HotKeys.js 2.0.3 发布,设置快捷键,键盘捕捉JS库

这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k。 更新内容: 1. 修复设置快捷键时报错;7245edc 2. 快捷键大小写忽略;30523a7 3. Cmd + ,,, 特殊键的支持;30523a7 4. cmd+command+c 快捷键的支持;30523a7 5. 添加更多的测试用例;b949d03 6. 更新文档遗漏API说明; 更多内容...

4
42
发表了资讯
2017/08/16 07:10

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

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

16
76
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
2 评论
177 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部