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 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
vue+iview写个弹框的示例代码
Dec 05 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
vue实现简单图片上传
Jun 30 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网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php 错误处理经验分享
2011/10/11 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
js实现抽奖效果
2017/03/27 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
餐饮总经理岗位职责
2014/03/07 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
档案保密承诺书
2014/06/03 职场文书
安全责任书模板
2014/07/22 职场文书
办公室管理规章制度
2015/08/04 职场文书
人民币使用说明书
2019/04/17 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
python基础学习之递归函数知识总结
2021/05/26 Python
python实现简单的三子棋游戏
2022/04/28 Python
mysql数据库隔离级别详解
2022/06/16 MySQL
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript