使用 js 设置组合快捷键,支持多个组合键定义,还支持 React
╭┈┈╮ ╭┈┈╮ ╭┈┈╮
┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆ ┆┆ □ ┆┆ ┈┤┆ < ┆ -__┘┆ ┆ ┆┆__ ┈┈┤
╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈ ┆╰┈┈┈┈┈╯╰┈┈┈┈┈╯
创建
您将需要在您的系统上安装的 Node.js。
# bower 安装
$ bower install hotkeysjs# npm 安装
$ npm install hotkeys-js$ npm run build # 编译
$ npm run watch # 开发模式
使用
传统调用
<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 键!');
});
定义快捷键
// 定义 F5 快捷键
hotkeys('f5', function(event,handler){//event.srcElement: input //event.target: input// 阻止Widnows系统下的默认刷新事件event.preventDefault() alert('你按下了 F5 键!')
});
// 定义a快捷键
hotkeys('a', function(event,handler){//event.srcElement: input //event.target: inputif(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('scope1');
获取 区域范围标记
hotkeys.getScope();
设置 区域范围标记
hotkeys.setScope('scope1');
解除绑定
hotkeys.unbind("ctrl+o, ctrl+alt+enter")
解除绑定两组快捷键
hotkeys.unbind("ctrl+o","files")
解除绑定名字叫files钟的一组快捷键
键判断
判断摁下的键是否为某个键
hotkeys('a', function(){console.log(hotkeys.isPressed("a")); //=> trueconsole.log(hotkeys.isPressed("A")); //=> trueconsole.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
快捷键设置才会起作用,false
快捷键设置失效。
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
React中使用
react-hotkeys,安装如下:
npm i -S react-hot-keys
例子
import React, { Component } from 'react';
import Hotkeys from 'react-hot-keys';export default class HotkeysDemo extends Component {constructor(props) {super(props);this.state = {output: 'Hello, I am a component that listens to keydown and keyup of a',}}onKeyUp(keyName, e, handle) {console.log("test:onKeyUp", e, handle)this.setState({ output: `onKeyUp ${keyName}` });}onKeyDown(keyName, e, handle) {console.log("test:onKeyDown", keyName, e, handle)this.setState({ output: `onKeyDown ${keyName}` });}render() {return (<Hotkeys keyName="shift+a,alt+s" onKeyDown={this.onKeyDown.bind(this)}onKeyUp={this.onKeyUp.bind(this)}><div style={{ padding: "50px" }}> {this.state.output} </div></Hotkeys>)}
}
转载于:https://www.cnblogs.com/wcjiang/p/8658064.html
使用 js 设置组合快捷键,支持多个组合键定义,还支持 React相关推荐
- windows10功能键设置为快捷键不需要fn组合使用
问题背景:win10之前的系统F1~F12和其他的一些功能键,基本单独使用时是快捷键.而win10系统却需要使用fn + 功能键 组合来使用才是快捷键方式.使用起来很不方便.如:我们经常在debug时 ...
- 用js 设置网页快捷键
document.onkeydown = onKeyDownlet that = this// 快捷键function onKeyDown () {if ('router-path' === opti ...
- Win10电脑的快捷键有哪些?Windows10常用组合快捷键大全
小白进阶之Windows10常用组合快捷键大全 一.引言 二.Windows10常用组合快捷键 1.Ctrl组合快捷键 2.Alt组合快捷键 3.Windows组合快捷键 4. 虚拟桌面 5.其它 三 ...
- as5300g2 nas软件功能_铁威马F2-221上手:家用NAS入门首选,还支持两年换新
近两年我出来工作后,不少工作文件.视频素材都需要备份,而且手机更换了两三次,里边的照片也有一定的备份需求.按照我以往的习惯,备份文件无非就是上传到云盘.然而随着文件照片数量的增加,实际操作下来体验真的 ...
- 二代CMS旅游网站程序国际版开发中(支持英文、法文等),支持拓展语言包
二代CMS旅游网站程序国际版开发中(支持英文.法文.德文等),支持拓展语言包,理论上可以拓展成任何一种语言,前端和后端都支持在线语言切换,前端还支持支付货币的币种切换,敬请期待! 转载于:https: ...
- vb.net 组合快捷键如何设置_你不知道的PPT快捷键
晚上好呀,我是三石~ 为了提高PPT的制作效率,我们经常会用到一些快捷键. 你现在脑海里是不是也浮现出一些快捷键(Ctrl+C.Ctrl+V等). PS:有些人喜欢直接将操作按钮添加到[自定义功能区] ...
- Notepad++ 编辑器常用设置与常用组合快捷键汇总
1.编辑器设置中文 安装后,鉴于工作的习惯性,可选择相应的语言(简体中文和英文).对于我来说,英文不是很好,且工作习惯,选择的是简体中文,设置截图如下(刚刚开始时,编辑器默认的不是黑色,这是我设置过的 ...
- sublime自动识别html代码格式,Sublime Text3格式化html/css/js代码以及快捷键的查看与设置...
本篇文章主要介绍在Sublime Text3中如何进行代码的格式化,以及去查看和设置Sublime默认的快捷键和插件的快捷键. 一.格式化html.css.js代码 1)首先我们使用Sublime自带 ...
- Swing 设置组合快捷键
想设置Ctrl+d,Alt+d,这种组合快捷键,找了半天未果,结果发现,java本省就预先设置好了,挺好用的,而且目测自己没什么办法设置组合键,当按下了Ctrl或者Alt这种键时,根本监听不到其它键的 ...
最新文章
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
- [LeetCode]3.Longest Substring Without Repeating Characters
- springBoot静态资源处理
- 六、Go编程语言中的函数式编程
- 跨域资源共享(CORS)--跨域ajax
- 常见的排序算法五——堆排序
- 【浙大第19届校赛:B】Even Number Theory (数论n!中有多少个质因子2+java大数)
- 常用免费DEM数据汇总(含下载使用方法)
- 软件测试视频教程下载:APP测试类型和方法
- 一文看懂外汇风险准备金率调整为 20%的含义
- 题解报告——Sandy的卡片
- Numpy 中的矩阵向量乘法
- 子矩阵的和(Python实现)
- 人工智能实践作业-修道士和野人过河问题
- 软件工程网络15团队作业1——团队组队展示
- UID-04-PS-书籍装帧
- 音频降噪算法 java_基于RNN的音频降噪算法
- 开源工具利器之基于主机的IDS:Wazuh
- Redis集群节点的变更
- opencv设置摄像头分辨率不生效
热门文章
- c++将小写转换为大写函数_必须掌握的基础函数组合应用技巧,提高效率,准时下班...
- python中reshape_Numpy之reshape()使用详解
- 表级锁的mysql读写_Mysql的表级锁
- 分级调节是调节机制吗_机制砂大热,5种制砂工艺及特点介绍,选对生产工艺,保证高效生产...
- HTML+CSS+JS实现 ❤️echarts企业地区大数据图表模板❤️
- HTML+CSS+JS实现 ❤️3D网状球体动画特效❤️
- informix和mysql的区别_DB2与Informix区别比较
- conv2d的输入_pytorch1.0中torch.nn.Conv2d用法详解
- mplab x ide 中文使用手册_中文文档:MPLAB ICD 4在线调试器用户指南
- java如何在指定索引位置插入新元素