keyboard.js:可添加快捷键组合的JavaScript类库

今天分享一款帮助大家在网站或者web应用中添加快捷键组合的类库 - keyboard.js，使用这个类库你可以很方便的捕捉输入键的组合，可以帮助你很好的添加相关快捷键的操作，希望大家喜欢!

主要特性：

◆ 独立类库，当然也可以和其它类库组合使用，例如，jQuery

◆ 字母或者字母组合绑定

◆ 支持Callback回调

◆ 多语言支持

◆ 支持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个JavaScript技巧
2. JavaScript MVC框架backbone.js初探
3. JavaScript面向对象编程
4. 10个强大的JavaScript表单验证插件
5. JavaScript开发者必备的十款超级有用的工具