捕获键盘输入和输入组合键的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 键！');
});