javascript 组合按键事件监听实现代码
javascript组合按键事件监听实现代码
JS组合按键事件监听,支持同时监听多组按键如{a,b,c,}{ctrl,c}。
实例代码:
<scripttype="text/javascript"> (function(){ /** *dqKeysv1.0.0|(c)2016www.findme.wang *@paramsjsonkeys监听的按键 *@paramsboolisOrder按键是否有相应的顺序 *@paramsFunctionsucFuc完成按键的回调函数 *@paramsFunctioncancelFuc完成按键取消后的回调函数 *@authorlidequan */ vardqKeys=function(keys,isOrder,sucFuc,cancelFuc){ //函数体 returnnewdqKeys.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; returnthis; }, listenkeys:function(){//监听用户键盘操作 var_self=this; _self.addListener('keydown',function(oEvent){ varoEvent=oEvent||window.event; if(!_self.arrayContain(_self.curKeys,oEvent.keyCode)){ if(_self.isOrder&&_self.getNextKey()==oEvent.keyCode){ _self.curKeys.push(oEvent.keyCode); }elseif(!_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){ varoEvent=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(variinjson){ if(arr.indexOf(json[i])==-1){ returnfalse; } } returntrue; }, remove:function(arr,val){//从数组中移除某个元素 varindex=arr.indexOf(val); if(index>-1){ arr.splice(index,1); } returnarr; }, getNextKey:function(){//获取下一次按键对应的ascii码 for(variinthis.rightKeys){ if(this.curKeys.indexOf(this.rightKeys[i])==-1){ returnthis.rightKeys[i]; } } returnnull; }, 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.测试 vardqKeys=new$$({'c':67,'d':68},false,function(){ console.log('keysdown'); },function(){ console.log('keyscancel'); }); dqKeys.listenkeys(); </script>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!