设为首页收藏本站
开启辅助访问

在路上

 找回密码
 立即注册
在路上 › 站点首页 ›学习 › 查看内容

JS组合按键事件监听插件

2016-12-20 13:14| 发布者: zhangjf| 查看: 429| 评论: 0

摘要: JS组合按键事件监听，支持同时监听多组按键如{a,b,c,}{ctrl,c} script type=text/javascript (function(){ /** *dqKeys v1.0.0 | (c) 2016 www.findme.wang *@ ...
JS组合按键事件监听，支持同时监听多组按键如{a,b,c,}{ctrl,c}
  1. <script type="text/javascript">
  2. (function(){
  3. /**
  4. *dqKeys v1.0.0 | (c) 2016 www.findme.wang
  5. *@params json keys 监听的按键
  6. *@params bool isOrder 按键是否有相应的顺序
  7. *@params Function sucFuc 完成按键的回调函数
  8. *@params Function cancelFuc 完成按键取消后的回调函数
  9. *@author lidequan
  10. */
  11. var dqKeys = function(keys,isOrder,sucFuc,cancelFuc) {
  12. // 函数体
  13. return new dqKeys.fn.init(keys,isOrder,sucFuc,cancelFuc);
  14. }
  15. dqKeys.fn = dqKeys.prototype = {
  16. 'version':'1.0.0', //版本号
  17. 'author':'lidequan', //作者
  18. 'rightKeys':{}, //监听的按键{key:code},code为按键对应的ascii码
  19. 'curKeys':[], //当前按下的键
  20. 'sucFuc':null, //完成按键的回调函数
  21. 'cancelFuc':null, //完成按键取消后的回调函数
  22. 'isFinsh':false, //判断是否完成按键
  23. 'isOrder':false, //按键是否有相应的顺序
  24. init:function(keys,isOrder,sucFuc,cancelFuc){
  25. this.rightKeys=keys;
  26. this.sucFuc=sucFuc;
  27. this.cancelFuc=cancelFuc;
  28. this.isOrder=isOrder;
  30. return this;
  31. },
  32. listenkeys:function(){//监听用户键盘操作
  33. var _self=this;
  34. _self.addListener('keydown', function(oEvent){
  35. var oEvent =oEvent || window.event;
  36. if(!_self.arrayContain(_self.curKeys,oEvent.keyCode)){
  37. if(_self.isOrder && _self.getNextKey() == oEvent.keyCode){
  38. _self.curKeys.push(oEvent.keyCode);
  39. }else if(!_self.isOrder){
  40. _self.curKeys.push(oEvent.keyCode);
  41. }
  42. }
  43. if(_self.checkResult(_self.rightKeys,_self.curKeys)){
  44. if(_self.sucFuc && !_self.isFinsh){
  45. _self.sucFuc();
  46. }
  47. _self.isFinsh=true;
  48. }
  49. });
  50. _self.addListener('keyup', function(oEvent){
  51. var oEvent =oEvent || window.event;
  52. if(_self.checkResult(_self.rightKeys,_self.curKeys) && _self.isFinsh){
  53. //完成按键,又取消的事件
  54. if(_self.cancelFuc){
  55. _self.cancelFuc();
  56. }
  57. }
  59. _self.curKey=_self.remove(_self.curKeys,oEvent.keyCode);
  60. _self.isFinsh=false;
  61. });
  62. },
  63. arrayContain:function(arr,val){//判断数组中是否包含某个元素
  64. return (arr.indexOf(val) == -1) ? false:true;
  65. },
  66. checkResult:function(json,arr){ //判断用户是否按下监听的所有按键
  67. for(var i in json){
  68. if(arr.indexOf(json[i])==-1){
  69. return false;
  70. }
  71. }
  72. return true;
  73. },
  74. remove:function(arr,val) { //从数组中移除某个元素
  75. var index = arr.indexOf(val);
  76. if (index > -1) {
  77. arr.splice(index, 1);
  78. }
  79. return arr;
  80. },
  81. getNextKey:function(){ //获取下一次按键对应的ascii码
  82. for(var i in this.rightKeys){
  83. if(this.curKeys.indexOf(this.rightKeys[i])==-1){
  84. return this.rightKeys[i];
  85. }
  86. }
  87. return null;
  88. },
  89. addListener:function(ev,fn,bool){ //事件绑定
  90. if (document.attachEvent) {
  91. document.attachEvent('on' + ev, fn);
  92. }else{
  93. document.addEventListener(ev,fn,bool);
  94. }
  95. }
  97. }
  98. dqKeys.fn.init.prototype = dqKeys.fn;
  99. window.dqKeys = window.$$= dqKeys;
  100. })();
  102. //1.测试
  103. dqKeys({'a':65,'b':66},true,function(){
  104. console.log('okey');
  105. },function(){
  106. console.log('cancel');
  107. }).listenkeys();
  109. //2.测试
  110. var dqKeys=new $$({'c':67,'d':68},false,function(){
  111. console.log('keys down ');
  112. },function(){
  113. console.log('keys cancel');
  114. });
  115. dqKeys.listenkeys();
  116. </script>
复制代码
收藏 邀请
上一篇：微信授权获取用户的openid下一篇：通过当前的view找到所在view的控制器

最新评论

相关分类

小黑屋|在路上 ( 蜀ICP备15035742号-1 )  

;

GMT+8, 2025-7-8 07:15

Copyright 2015-2025 djqfx

返回顶部