首页 > web前端 > js教程 > 正文

JS组合按键事件监听插件的详细介绍

黄舟
发布: 2017-03-01 14:34:25
原创
1804人浏览过

<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组合按键事件监听插件的详细介绍的内容,更多相关内容请关注PHP中文网(www.php.cn)!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号