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

 更新时间:2017年02月21日 10:15:43   投稿:lqh  
这篇文章主要介绍了javascript 组合按键事件监听实现代码的相关资料,需要的朋友可以参考下

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>

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

相关文章

  • js 取消页面可以选中文字的功能方法

    js 取消页面可以选中文字的功能方法

    下面小编就为大家分享一篇js 取消页面可以选中文字的功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • js实现图片轮换效果代码

    js实现图片轮换效果代码

    本教程使用js实现两张图片切换/多张图片轮换/结束执行等效果,感兴趣的朋友可以参考下哈,希望对你学习js有所帮助
    2013-04-04
  • 微信小程序仿知乎实现评论留言功能

    微信小程序仿知乎实现评论留言功能

    这篇文章主要为大家详细介绍了微信小程序仿知乎实现评论留言功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript判断微信浏览器实例代码

    JavaScript判断微信浏览器实例代码

    本文给大家介绍如何判断用户是否是用微信浏览器的实例代码,根据关键字 MicroMessenger 来判断是否是微信内置的浏览器,感兴趣的朋友可以参考下实现代码
    2016-06-06
  • TypeScript 工具泛型教程示例

    TypeScript 工具泛型教程示例

    这篇文章主要为大家介绍了TypeScript 工具泛型教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • TypeError document.getElementById(...) is null错误原因

    TypeError document.getElementById(...) is null错误原因

    这篇文章主要介绍了TypeError document.getElementById(...) is null错误原因,这是很容易犯的一个低级错误,需要的朋友可以参考下
    2015-05-05
  • JavaScript中调用函数的4种方式代码实例

    JavaScript中调用函数的4种方式代码实例

    这篇文章主要介绍了JavaScript中调用函数的4种方式代码实例,本文分别给出方法调用模式、函数调用模式、构造器调用模式、apply调用模式4种方式的代码实例,需要的朋友可以参考下
    2015-07-07
  • 通过扫小程序码实现网站登陆功能

    通过扫小程序码实现网站登陆功能

    这篇文章主要介绍了通过扫小程序码实现网站登陆功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 原生js实现简易计算器

    原生js实现简易计算器

    这篇文章主要为大家详细介绍了原生js实现简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • javascript实现拖拽并替换网页块元素

    javascript实现拖拽并替换网页块元素

    实现类似于学生换座位的效果,将网页内的两个元素通过拖拽的方式互换。
    2009-11-11

最新评论