最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:懂视网 责编:小采 时间:2020-11-27 20:24:33
文档

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

JS组合按键事件监听插件的详细介绍:<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 完成按键取消后的回调函数
推荐度:
导读JS组合按键事件监听插件的详细介绍:<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 完成按键取消后的回调函数

<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组合按键事件监听插件的详细介绍

JS组合按键事件监听插件的详细介绍:<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 完成按键取消后的回调函数
推荐度:
标签: 介绍 按键 插件
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top