java监听组合按键_javascript 组合按键事件监听实现代码

javascript 组合按键事件监听实现代码

JS组合按键事件监听，支持同时监听多组按键如{a,b,c,}{ctrl,c}。

实例代码：

(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();

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