hotkeys.js是一款用于捕获键盘输入和输入组合键的js库。hotkeys.js没有依赖,压缩后小于3kb。hotkeys.js可以捕获用户的键盘按键或组合键的输入,非常实用。
安装
可以使用bower,npm来安装hotkeys.js。
# bower 安装 $ bower install hotkeysjs # npm 安装 $ npm install hotkeys-js
使用方法
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> ) } }
传统方法
传统方法在页面中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: 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
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/
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!