HotKeys設(shè)置快捷鍵，鍵盤(pán)輸入捕捉JS庫(kù)

Hotkey 是用來(lái)捕捉鍵盤(pán)輸入的 JavaScript 庫(kù)。

預(yù)覽：http://jaywcjlove.github.io/hotkeys/

使用

包加載

import hotkeys from 'hotkeys-js';

hotkeys('shift+a,alt+d, w', function(e){
    console.log('干點(diǎn)活兒',e);
    if(hotkeys.shift) console.log('大哥你摁下了 shift 鍵！');
    if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 鍵！');
    if(hotkeys.alt) console.log('大哥你摁下了 alt 鍵！');
});

設(shè)置快捷鍵

自定義快捷鍵沒(méi)有依賴(lài)。這又是在重復(fù)造輪子，呵呵~??！

創(chuàng)建

您將需要在您的系統(tǒng)上安裝的 Node.js。

# npm 安裝
$ bower install hotkeysjs


# npm 安裝
$ npm install hotkeys-js


# 在頁(yè)面上引用需要壓縮的話(huà)，運(yùn)行
$ grunt dist


# 在dist目錄中生成下列文件：
# dist/hotkeys.js
# dist/hotkeys.min.js
# dist/hotkeys.min.map

定義快捷鍵

// 定義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將停止活動(dòng)，并阻止默認(rèn)瀏覽器事件
hotkeys('ctrl+r', function(){ alert('停止刷新!'); return false });


// 多個(gè)快捷方式做同樣的事情
hotkeys('?+r, ctrl+r', function(){ });


// 對(duì)所有摁鍵執(zhí)行任務(wù)
hotkeys('*','wcj', function(e){
    console.log('干點(diǎn)活兒',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(大寫(xiě))
fn 功能鍵就是fn(不支持)
?? return/enter space 空格鍵

修飾鍵判斷

可以對(duì)下面的修飾鍵判斷 shift alt option ctrl control command，特別注意+和=鍵值相同，組合鍵設(shè)置?+=

hotkeys('shift+a,alt+d, w', function(e){
    console.log('干點(diǎn)活兒',e);
    if(hotkeys.shift) console.log('大哥你摁下了 shift 鍵！');
    if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 鍵！');
    if(hotkeys.alt) console.log('大哥你摁下了 alt 鍵！');
});

切換快捷鍵 

如果在單頁(yè)面在不同的區(qū)域，相同的快捷鍵，干不同的事兒，之間來(lái)回切換。O(∩_∩)O ！

// 一個(gè)快捷鍵，有可能干的活兒不一樣哦
hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){
    console.log('干點(diǎn)活兒');
});
hotkeys('o, enter', 'files', function(){ 
    console.log('另一種活兒');
});


// 設(shè)定范圍scope 
hotkeys.setScope('issues'); // 默認(rèn)所有事兒都干哦

刪除標(biāo)記快捷鍵

刪除區(qū)域范圍標(biāo)記

hotkeys.deleteScope('issues');

解除綁定

hotkeys.unbind("ctrl+o, ctrl+alt+enter")// 解除綁定兩組快捷鍵  
hotkeys.unbind("ctrl+o","files")//解除綁定名字叫files鐘的一組快捷鍵

鍵判斷

判斷摁下的鍵是否為某個(gè)鍵

hotkeys('a', function(){
    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]
})

過(guò)濾

INPUT SELECT TEXTAREA 默認(rèn)不處理。
hotkeys.filter 返回 true 快捷鍵設(shè)置才會(huì)起作用，flase 快捷鍵設(shè)置失效。

hotkeys.filter = function(event){
  return true;
}
//如何增加過(guò)濾可編輯標(biāo)簽 //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