捕获键盘输入和输入组合键的js库hotkeys

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/