使用 js 设置组合快捷键,支持多个组合键定义,还支持 React
2024-10-18 22:34:54
╭┈┈╮ ╭┈┈╮ ╭┈┈╮
┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆ ┆┆ □ ┆┆ ┈┤┆ < ┆ -__┘┆ ┆ ┆┆__ ┈┈┤
╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈ ┆╰┈┈┈┈┈╯
╰┈┈┈┈┈╯
创建
您将需要在您的系统上安装的 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: 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('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")); //=> true
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
快捷键设置才会起作用,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>
)
}
}
最新文章
- 设计模式(十三)代理模式(Proxy Pattern)
- MySQL--将MySQL数据导入到SQL Server
- mysql_query()与mysql_real_query()
- pt-fifo-split使用
- Spring事务传播、隔离等级
- ps、grep和kill联合使用杀掉进程(转)
- 创建DirectInput接口对象说明---(void **)&;m_pDI
- $(document).ready vs $(window).load vs window.onload
- 20_采用ContentProvider对外共享数据
- 深入分析Cookie的安全性问题
- BZOJ_1221_ [HNOI2001]_软件开发(最小费用流,网络流24题#10)
- 快速解读GC日志(转)
- CentOS6.6 搭建Zabbix_3.0
- UNION ALL合表查询
- 夏娜的菠萝包 JDFZ1098
- 11GR2 Oracle数据库的远程投毒VNCR方式修复
- 【Python实战】使用Python连接Teradata数据库???未完成
- 【WPF】ImageMagick调节图片的颜色
- day23-python操作数据库三
- linux之网络
热门文章
- Android 进程常驻、进程守护、进程保活技术的总结
- WIN7 嵌入式系统安装教程 Windows Embedded Standard 2011 安装
- AM335x关于LCD屏幕的时钟PLL配置
- Error Code: 1305. FUNCTION student.rand_string does not exist
- hibernate学习(三) hibernate中的对象状态
- lightoj 1025 区间dp
- android小程序之幸运菜谱
- 都是SCI惹的祸?
- 【BZOJ2037】Sue的小球(动态规划)
- ffplay常用命令