如何分析可添加快捷键组合的JavaScript类库keyboard.js

技术如何分析可添加快捷键组合的JavaScript类库keyboard.js这篇文章给大家介绍如何理解可添加快捷键组合的JavaScript类库keyboard.js,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大

本文介绍如何理解可以添加快捷键组合的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

(0)

相关推荐

  • 11月17日Java学习日记

    技术11月17日Java学习日记 11月17日Java学习日记面向对象编程(oop)面向对象:物以类聚,分类的思维模式,思考问题,首先解决问题需要哪些分类,然后对这些分类进行单独思考。最后,才对某个分类

    礼包 2021年11月18日
  • MySQL怎么进行批量更新和删除数据shell脚本

    技术MySQL怎么进行批量更新和删除数据shell脚本MySQL怎么进行批量更新和删除数据shell脚本,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。#

    攻略 2021年10月29日
  • yum方式安装Percona XtraBackup报错怎么办

    技术yum方式安装Percona XtraBackup报错怎么办小编给大家分享一下yum方式安装Percona XtraBackup报错怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这

    攻略 2021年11月1日
  • mysql复制表的几种方式

    技术mysql复制表的几种方式 mysql复制表的几种方式所描述的方法还请实际测试一下再使用.
    1、复制表结构及数据到新表
    CREATE TABLE 新表SELECT * FROM 旧表
    这种方法会将o

    礼包 2021年12月17日
  • PythonRemoteServer 使用,原文翻译)

    技术PythonRemoteServer 使用,原文翻译) PythonRemoteServer 使用(原文翻译)PythonRemoteServerhttps://github.com/robotfr

    礼包 2021年11月10日
  • 在Oracle11g RAC环境下如何处理ORA-00845错误

    技术在Oracle11g RAC环境下如何处理ORA-00845错误这篇文章主要为大家展示了“在Oracle11g RAC环境下如何处理ORA-00845错误”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小

    攻略 2021年11月17日