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>

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