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

日期：2012/02/08  来源：GBin1.com

在线演示  本地下载

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

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