本文介绍如何理解可以添加快捷键组合的JavaScript类库keyboard.js。内容非常详细,有兴趣的朋友可以参考一下,希望对你有帮助。
今天分享一个类库——keyboard . js,可以帮助你在网站或者web应用中添加快捷键组合。有了这个类库,您可以轻松地捕获输入键的组合,并帮助您添加相关的快捷键。希望你喜欢!
主要特点:
独立类库当然也可以和其他类库结合使用,比如jQuery。
字母或字母组合装订
支持回拨回拨
多语言支持
支持AMD加载,如RequireJS
完整的文档
Javascript:
$(文档)。ready(function(){vargbin1=['g ',' b ',' I ',' n ',' 1'],google=['g ',' o ',' o ',' g ',' l ',' e'],baidu=['b ',' a ',' I ',' d ',' u'],kI=0;document . addeventlistener(' keydown ',function(){ varkeys=keyboardjs . activekeys();if(keys . length){ for(vari=0;ikeys.lengthI=1){ if(key[I]==gbi 1[KI]){ if(Kigbi 1 . length-1){ KI=1;}else{$('#info ')。html(' LoadingBin
1.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就分享到这里了,希望
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/99259.html