今天分享一款幫助大家在網(wǎng)站或者web應(yīng)用中添加快捷鍵組合的類庫 - keyboard.js，使用這個(gè)類庫你可以很方便的捕捉輸入鍵的組合，可以幫助你很好的添加相關(guān)快捷鍵的操作，希望大家喜歡!

主要特性：

◆ 獨(dú)立類庫，當(dāng)然也可以和其它類庫組合使用，例如，jQuery

◆ 字母或者字母組合綁定

◆ 支持Callback回調(diào)

◆ 多語言支持

◆ 支持AMD加載，例如 RequireJS

◆ 文檔完整

Javascript：

$(document).ready(function(){     
    var gbin1 = ['g', 'b', 'i', 'n', '1'],  
         google = ['g', 'o', 'o', 'g', 'l', 'e'],  
         baidu = ['b', 'a', 'i', 'd', 'u'],  
    kI = 0;  
    document.addEventListener('keydown', function(){  
        var keys = KeyboardJS.activeKeys();  
        if(keys.length) {  
            for(var i = 0; i < keys.length; i += 1) {  
 
                if(keys[i] === gbin1[kI]) {  
                    if(kI < gbin1.length - 1) {  
                        kI += 1;  
                    } else {  
                        $("#info").html("Loading gbin1.com ... ...");  
                        location = "http://www.gbin1.com";  
                    }  
                } else if(keys[i] === google[kI]) {  
                    if(kI < gbin1.length - 1) {  
                        kI += 1;  
                    } else {  
                        $("#info").html("Loading gbin1.com ... ...");  
                        location = "http://www.google.com";  
                    }  
                } else if(keys[i] === baidu[kI]) {  
                    if(kI < gbin1.length - 1) {  
                        kI += 1;  
                    } else {  
                        $("#info").html("Loading gbin1.com ... ...");  
                        location = "http://www.baidu.com";  
                    }  
                } else{  
                    kI = 0;  
                }  
                  
                var keysString;  
 
                keysString = keys.join(', ');  
                  
                if(keysString!=' '){  
                    var log=$("#log");  
                    log.append('<b style="display:none;border:1px solid #CCC;background:#000;color:#CCC;padding: 5px 10px;margin:5px">' + keysString + '</b>').find("b").last().show();  
                }  
 
            }  
        }     
    });  
}); 

HTML

<div id="container"> 
    <img src="img/logo.jpg"> 
    <h3>Please typing one of site names below: <span id="log" style="position:absolute"></span></h3> 
    <ul> 
        <li>gbin1</li> 
        <li>google</li> 
        <li>baidu</li> 
    </ul> 
    <div id="info">Status bar</div> 
</div> 

CSS

body{  
    background: #ccc;  
}  
 
#container{  
    margin: 0 auto;  
    background: #202020;  
    width: 960px;  
    color: #E3E3E3;  
    padding: 15px;  
    margin-top: 0;  
}  
 
h3{  
    font-size:16px;  
    font-family: Arial;  
    font-weight: normal;  
}  
 
#log b{  
    position:relative;  
}  
 
#info{  
    background: #303030;  
    padding: 10px;  
    font-size: 10px;  
    color: #888;  
} 

原文：http://www.gbin1.com/technology/javascript/20120208keyboard4keyshortcutsupport/

【編輯推薦】

1. 早該知道的7個(gè)JavaScript技巧
2. JavaScript MVC框架backbone.js初探
3. JavaScript面向?qū)ο缶幊?/a>
4. 10個(gè)強(qiáng)大的JavaScript表單驗(yàn)證插件
5. JavaScript開發(fā)者必備的十款超級(jí)有用的工具