其他代码
hotkeys - 捕获键盘输入和输入组合键
PetitQ
hotkeys.js 是一款用于捕获键盘输入和输入组合键的 js 库。hotkeys.js 没有依赖，压缩后小于 3kb。hotkeys.js 可以捕获用户的键盘按键或组合键的输入，非常实用。
使用方法：
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 (
<HotkeyskeyName="shift+a,alt+s"
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
><div style={{ padding: "50px" }}>
{this.state.output}
</div>
</Hotkeys>
)}}
也想出现在这里？联系我们吧
传统方法：
传统方法在页面中 hotkeys.js。
<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: 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 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 键！');
});
关于 hotkeys.js 更多的使用方法请查看官方 github 地址：https://github.com/jaywcjlove/hotkeys/
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
