分享一個用來添加快捷鍵組合的javascript類庫 - keyboard.js

日期：2012/02/08

今天分享一款幫助大家在網站或者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>

效果請參考在線演示

posted @ 2012-02-08 23:30 igeekbar 閱讀(951) 評論(0) 收藏舉報

刷新頁面返回頂部

分享一個用來添加快捷鍵組合的javascript類庫 - keyboard.js

主要特性：

Javascript：

HTML

公告

中文互聯： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機訂閱