分享一个用来添加快捷键组合的javascript类库 - keyboard.js

最新推荐文章于 2024-12-17 00:00:00 发布

转载最新推荐文章于 2024-12-17 00:00:00 发布 · 108 阅读

文章标签：

#javascript #ViewUI

本文介绍了一款名为keyboard.js的类库，该类库能够帮助开发者轻松地为网站或Web应用添加快捷键功能。它支持字母及字母组合绑定、多语言、AMD加载等特性，并且可以与jQuery等其他类库结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日期：2012/02/08

分享一个用来添加快捷键组合的javascript类库 - keyboard.js

在线演示本地下载

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

效果请参考在线演示