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

創建

您將需要在您的系統上安裝的 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: 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, 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")); //=> trueconsole.log(hotkeys.isPressed("A")); //=> trueconsole.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>)} }

轉載于:https://www.cnblogs.com/wcjiang/p/8658064.html

總結

以上是生活随笔為你收集整理的使用 js 设置组合快捷键，支持多个组合键定义，还支持 React的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。