javascript 组合按键事件监听实现代码


Posted in Javascript onFebruary 21, 2017

javascript 组合按键事件监听实现代码

JS组合按键事件监听,支持同时监听多组按键如{a,b,c,}{ctrl,c}。

实例代码:

<script type="text/javascript"> 
   (function(){ 
    /** 
    *dqKeys v1.0.0 | (c) 2016 www.findme.wang 
    *@params json keys 监听的按键 
    *@params bool isOrder 按键是否有相应的顺序 
    *@params Function sucFuc 完成按键的回调函数 
    *@params Function cancelFuc 完成按键取消后的回调函数 
    *@author lidequan 
    */ 
    var dqKeys = function(keys,isOrder,sucFuc,cancelFuc) { 
      // 函数体 
      return new dqKeys.fn.init(keys,isOrder,sucFuc,cancelFuc); 
    } 
    dqKeys.fn = dqKeys.prototype = { 
      'version':'1.0.0',  //版本号 
      'author':'lidequan', //作者 
      'rightKeys':{},   //监听的按键{key:code},code为按键对应的ascii码  
      'curKeys':[],    //当前按下的键 
      'sucFuc':null,    //完成按键的回调函数 
      'cancelFuc':null,  //完成按键取消后的回调函数 
      'isFinsh':false,  //判断是否完成按键 
      'isOrder':false,  //按键是否有相应的顺序 
      init:function(keys,isOrder,sucFuc,cancelFuc){ 
        this.rightKeys=keys; 
        this.sucFuc=sucFuc; 
        this.cancelFuc=cancelFuc; 
        this.isOrder=isOrder; 
          
        return this; 
      }, 
      listenkeys:function(){//监听用户键盘操作         
        var _self=this; 
        _self.addListener('keydown', function(oEvent){ 
          var oEvent =oEvent || window.event; 
          if(!_self.arrayContain(_self.curKeys,oEvent.keyCode)){ 
            if(_self.isOrder && _self.getNextKey() == oEvent.keyCode){ 
              _self.curKeys.push(oEvent.keyCode); 
            }else if(!_self.isOrder){ 
              _self.curKeys.push(oEvent.keyCode); 
            } 
          } 
          if(_self.checkResult(_self.rightKeys,_self.curKeys)){ 
            if(_self.sucFuc && !_self.isFinsh){ 
              _self.sucFuc(); 
            } 
            _self.isFinsh=true; 
          } 
        }); 
        _self.addListener('keyup', function(oEvent){ 
          var oEvent =oEvent || window.event;          
          if(_self.checkResult(_self.rightKeys,_self.curKeys) && _self.isFinsh){    
            //完成按键,又取消的事件 
            if(_self.cancelFuc){ 
              _self.cancelFuc(); 
            } 
          } 
  
          _self.curKey=_self.remove(_self.curKeys,oEvent.keyCode); 
          _self.isFinsh=false; 
        }); 
      }, 
      arrayContain:function(arr,val){//判断数组中是否包含某个元素 
          return (arr.indexOf(val) == -1) ? false:true; 
      }, 
      checkResult:function(json,arr){ //判断用户是否按下监听的所有按键 
        for(var i in json){ 
           if(arr.indexOf(json[i])==-1){ 
             return false; 
           } 
         } 
        return true; 
      }, 
      remove:function(arr,val) { //从数组中移除某个元素       
        var index = arr.indexOf(val);  
        if (index > -1) {  
          arr.splice(index, 1);  
        }  
        return arr; 
      }, 
      getNextKey:function(){ //获取下一次按键对应的ascii码 
        for(var i in this.rightKeys){ 
          if(this.curKeys.indexOf(this.rightKeys[i])==-1){ 
             return this.rightKeys[i]; 
           } 
        } 
        return null; 
      }, 
      addListener:function(ev,fn,bool){ //事件绑定 
        if (document.attachEvent) {  
          document.attachEvent('on' + ev, fn);  
        }else{   
          document.addEventListener(ev,fn,bool);  
        }  
      } 
  
    } 
    dqKeys.fn.init.prototype = dqKeys.fn; 
    window.dqKeys = window.$$= dqKeys; 
   })(); 
  
  //1.测试 
  dqKeys({'a':65,'b':66},true,function(){ 
                  console.log('okey'); 
                },function(){ 
                  console.log('cancel'); 
                }).listenkeys(); 
  
  //2.测试 
  var dqKeys=new $$({'c':67,'d':68},false,function(){ 
                  console.log('keys down '); 
                },function(){ 
                  console.log('keys cancel'); 
                }); 
  dqKeys.listenkeys(); 
  </script>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
vue 全局环境切换问题
Oct 27 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
react中props 的使用及进行限制的方法
Apr 28 Javascript
简单谈谈gulp-changed插件
Feb 21 #Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 #Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 #Javascript
jquery设置css样式的多种方法(总结)
Feb 21 #Javascript
JavaScript中 this 指向问题深度解析
Feb 21 #Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 #Javascript
从零学习node.js之模块规范(一)
Feb 21 #Javascript
You might like
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Python变量类型知识点总结
2019/02/18 Python
python中的print()输出
2019/04/12 Python
django2笔记之路由path语法的实现
2019/07/17 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
建筑工程管理专业自荐信范文
2013/12/28 职场文书
经典大学生求职信范文
2014/01/06 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
中秋节活动总结
2014/08/29 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书