使用 js 設置組合快捷鍵，支持多個組合鍵定義，還支持 React

╭┈┈╮          ╭┈┈╮  ╭┈┈╮
┆  ├┈┈..┈┈┈┈┈.┆  └┈╮┆  ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆     ┆┆  □  ┆┆   ┈┤┆    < ┆  -__┘┆  ┆  ┆┆__ ┈┈┤
╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈  ┆╰┈┈┈┈┈╯
                                  ╰┈┈┈┈┈╯

創建

您將需要在您的系統上安裝的 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>
    )
  }
}