Home > Web Front-end > JS Tutorial > body text

Detailed introduction of JS key combination event listening plug-in

黄舟
Release: 2017-03-01 14:34:25
Original
1709 people have browsed it


<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 = {
	    	&#39;version&#39;:&#39;1.0.0&#39;,    //版本号
	    	&#39;author&#39;:&#39;lidequan&#39;,  //作者
	    	&#39;rightKeys&#39;:{},      //监听的按键{key:code},code为按键对应的ascii码 
	    	&#39;curKeys&#39;:[],        //当前按下的键
	    	&#39;sucFuc&#39;:null,       //完成按键的回调函数
	    	&#39;cancelFuc&#39;:null,    //完成按键取消后的回调函数
	    	&#39;isFinsh&#39;:false,    //判断是否完成按键
	    	&#39;isOrder&#39;: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(&#39;keydown&#39;, 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(&#39;keyup&#39;, 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(&#39;on&#39; + ev, fn);  
			    }else{   
			        document.addEventListener(ev,fn,bool);  
			    }  
			}

	    }
	    dqKeys.fn.init.prototype = dqKeys.fn;
   		window.dqKeys = window.$$= dqKeys;
	  })();

    //1.测试
	dqKeys({&#39;a&#39;:65,&#39;b&#39;:66},true,function(){
									console.log(&#39;okey&#39;);
								},function(){
									console.log(&#39;cancel&#39;);
								}).listenkeys();

	//2.测试
	var dqKeys=new $$({&#39;c&#39;:67,&#39;d&#39;:68},false,function(){
									console.log(&#39;keys down &#39;);
								},function(){
									console.log(&#39;keys cancel&#39;);
								});
	dqKeys.listenkeys();
	</script>
Copy after login

The above is the detailed introduction of the JS key combination event listening plug-in. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template