javascript 組合按鍵事件監(jiān)聽實(shí)現(xiàn)代碼
javascript 組合按鍵事件監(jiān)聽實(shí)現(xiàn)代碼
JS組合按鍵事件監(jiān)聽,支持同時(shí)監(jiān)聽多組按鍵如{a,b,c,}{ctrl,c}。
實(shí)例代碼:
<script type="text/javascript">
(function(){
/**
*dqKeys v1.0.0 | (c) 2016 www.findme.wang
*@params json keys 監(jiān)聽的按鍵
*@params bool isOrder 按鍵是否有相應(yīng)的順序
*@params Function sucFuc 完成按鍵的回調(diào)函數(shù)
*@params Function cancelFuc 完成按鍵取消后的回調(diào)函數(shù)
*@author lidequan
*/
var dqKeys = function(keys,isOrder,sucFuc,cancelFuc) {
// 函數(shù)體
return new dqKeys.fn.init(keys,isOrder,sucFuc,cancelFuc);
}
dqKeys.fn = dqKeys.prototype = {
'version':'1.0.0', //版本號
'author':'lidequan', //作者
'rightKeys':{}, //監(jiān)聽的按鍵{key:code},code為按鍵對應(yīng)的ascii碼
'curKeys':[], //當(dāng)前按下的鍵
'sucFuc':null, //完成按鍵的回調(diào)函數(shù)
'cancelFuc':null, //完成按鍵取消后的回調(diào)函數(shù)
'isFinsh':false, //判斷是否完成按鍵
'isOrder':false, //按鍵是否有相應(yīng)的順序
init:function(keys,isOrder,sucFuc,cancelFuc){
this.rightKeys=keys;
this.sucFuc=sucFuc;
this.cancelFuc=cancelFuc;
this.isOrder=isOrder;
return this;
},
listenkeys:function(){//監(jiān)聽用戶鍵盤操作
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){//判斷數(shù)組中是否包含某個元素
return (arr.indexOf(val) == -1) ? false:true;
},
checkResult:function(json,arr){ //判斷用戶是否按下監(jiān)聽的所有按鍵
for(var i in json){
if(arr.indexOf(json[i])==-1){
return false;
}
}
return true;
},
remove:function(arr,val) { //從數(shù)組中移除某個元素
var index = arr.indexOf(val);
if (index > -1) {
arr.splice(index, 1);
}
return arr;
},
getNextKey:function(){ //獲取下一次按鍵對應(yīng)的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>
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- javascript如何刪除所有事件監(jiān)聽器
- JavaScript鼠標(biāo)拖動事件監(jiān)聽使用方法以及實(shí)例效果演示
- 關(guān)于js中removeEventListener取消事件監(jiān)聽的坑
- vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
- vue.js過濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺php數(shù)據(jù)交互實(shí)例
- vuejs2.0實(shí)現(xiàn)分頁組件使用$emit進(jìn)行事件監(jiān)聽數(shù)據(jù)傳遞的方法
- 一文詳解JavaScript的事件監(jiān)聽(最新整理)
相關(guān)文章
最新JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號實(shí)例(2022)
在前端開發(fā)過程中,通過使用JS的正則表達(dá)式來校驗(yàn)輸入的郵箱或者手機(jī)號是否正確,這也是一個非常常見的業(yè)務(wù)情景需求,下面這篇文章主要給大家介紹了關(guān)于利用JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號的相關(guān)資料,需要的朋友可以參考下2022-08-08
layui-tree實(shí)現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點(diǎn)的方法
今天小編就為大家分享一篇layui-tree實(shí)現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點(diǎn)的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
前端處理.xlsx文件流并觸發(fā)下載的完整實(shí)現(xiàn)方案
本文詳細(xì)介紹了前端處理.xlsx文件流并觸發(fā)下載的完整實(shí)現(xiàn)方案,包括核心實(shí)現(xiàn)流程、關(guān)鍵增強(qiáng)功能、常見問題處理以及最佳實(shí)踐建議,方案推薦使用FileSaver.js,適用于中型以上項(xiàng)目,需要的朋友可以參考下2025-03-03
基于JavaScript實(shí)現(xiàn)抽獎系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)抽獎系統(tǒng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01
采用自執(zhí)行的匿名函數(shù)解決for循環(huán)使用閉包的問題
這篇文章主要介紹了采用自執(zhí)行的匿名函數(shù)解決for循環(huán)使用閉包的問題,很簡單,但比較實(shí)用,需要的朋友可以參考下2014-09-09
JavaScript計(jì)算字符串中每個字符出現(xiàn)次數(shù)的小例子
這篇文章介紹了在JS中計(jì)算字符串中每個字符出現(xiàn)的次數(shù),有需要的朋友可以參考一下2013-07-07

