这篇文章给大家介绍如何理解可添加快捷键组合的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"> <h4>Please typing one of site names below: <span id="log" style="position:absolute"></span></h4> <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就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。