javascript 組合按鍵事件監(jiān)聽實現(xiàn)代碼
javascript 組合按鍵事件監(jiān)聽實現(xiàn)代碼
JS組合按鍵事件監(jiān)聽,支持同時監(jiān)聽多組按鍵如{a,b,c,}{ctrl,c}。
實例代碼:
<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':[], //當前按下的鍵 '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>
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
javascript實現(xiàn)時間格式輸出FormatDate函數(shù)
這篇文章主要介紹了javascript實現(xiàn)時間格式輸出FormatDate函數(shù),可實現(xiàn)fmt標簽一樣對日期時間型內(nèi)容格式輸入的功能,是非常實用的技巧,需要的朋友可以參考下2015-01-01JS實現(xiàn)金額轉(zhuǎn)換(將輸入的阿拉伯數(shù)字)轉(zhuǎn)換成中文的實現(xiàn)代碼
這篇文章介紹了JS實現(xiàn)金額轉(zhuǎn)換(將輸入的阿拉伯數(shù)字)轉(zhuǎn)換成中文的實現(xiàn)代碼,有需要的朋友可以參考一下,希望對大家有用2013-09-09js面向?qū)ο髮崿F(xiàn)canvas制作彩虹球噴槍效果
這篇文章主要介紹了js面向?qū)ο髮崿F(xiàn)canvas制作彩虹球噴槍效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09利用JS對iframe父子(內(nèi)外)頁面進行操作的方法教程
這篇文章主要給大家介紹了利用JS對iframe父子(內(nèi)外)頁面進行操作的方法教程,其中包括了怎么對iframe進行操作、在iframe里面控制iframe外面的js代碼以及在父框架對子iframe進行操作等,需要的朋友可以參考借鑒。2017-06-0610個很少使用的JavaScript?Console方法分享
你一定聽說過?console.log()?,而且可能一直在使用它,在本文中,我們將探討一些最有用的控制臺方法,以及它們在數(shù)據(jù)可視化、調(diào)試等方面的用途,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09defer屬性導(dǎo)致引用JQuery的頁面報“瀏覽器無法打開網(wǎng)站xxx,操作被中止”錯誤的解決方法
defer屬性導(dǎo)致引用JQuery的頁面報“瀏覽器無法打開網(wǎng)站xxx,操作被中止”錯誤2010-04-04