js事件绑定快捷键以ctrl+k为例

 更新时间:2014年09月30日 15:50:36   投稿:whsnow  
js为快捷键绑定事件,当按这个快捷键时就会触发事先绑定处理函数,下面以ctrl+k为例与大家分享下具体的实现代码

js代码

<html> 
<head> 
<script type="text/javascript"> 
window.onload=function(){ 
HotKeyHandler.Init(); 
} 
var HotKeyHandler={ 
currentMainKey:null, 
currentValueKey:null, 
Init:function(){ 
HotKeyHandler.Register(0,"K",function(){alert("注册成功");}); 
}, 
Register:function(tag,value,func){ 
var MainKey=""; 
switch(tag){ 
case 0: 
MainKey=17; //Ctrl 
break; 
case 1: 
MainKey=16; //Shift 
break; 
case 2: 
MainKey="18"; //Alt 
break; 
} 
document.onkeyup=function(e){ 
HotKeyHandler.currentMainKey=null; 
} 

document.onkeydown=function(event){ 
//获取键值 
var keyCode= event.keyCode ; 
var keyValue = String.fromCharCode(event.keyCode); 

if(HotKeyHandler.currentMainKey!=null){ 
if(keyValue==value){ 
HotKeyHandler.currentMainKey=null; 
if(func!=null)func(); 
} 
} 
if(keyCode==MainKey) 
HotKeyHandler.currentMainKey=keyCode; 
} 
} 
} 
</script> 
</head> 
<body> 
测试,按下ctrl+k你就会发现神奇的事情发生了 
</body> 
</html>

相关文章

  • JS 排序输出实现table行号自增前端动态生成的tr

    JS 排序输出实现table行号自增前端动态生成的tr

    一个项目,需要对数据进行排序输出,要求有行号,依次递增1.2.3.4.5,使用前端动态生成的tr
    2014-08-08
  • javascript判断iphone/android手机横竖屏模式的函数

    javascript判断iphone/android手机横竖屏模式的函数

    iphone能很好的使用onorientationchange事件,但是android的onresize事件即使不旋转也会触发多次
    2011-12-12
  • 微信小程序新手教程之启动页的重要性

    微信小程序新手教程之启动页的重要性

    这篇文章主要给大家介绍了关于微信小程序新手教程之启动页重要性的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • js实现图片点击左右轮播

    js实现图片点击左右轮播

    本文给大家分享的是使用javascript实现的图片左右轮播的代码,已经封装完毕,使用方法非常简单,参考示例,有需要的小伙伴可以参考下。
    2015-07-07
  • javascript 框架小结 个人工作经验

    javascript 框架小结 个人工作经验

    javascript 框架小结 个人工作经验,对于新手来说还是值得学习的。
    2009-06-06
  • 理解JavaScript的prototype属性

    理解JavaScript的prototype属性

    JavaScript可以说是最让人初学者难以理解的单一属性。我看了一些资料后,开始明白其实这些困难很大程度来自prototype这个名字本身的二义性
    2012-02-02
  • 微信小程序可滑动周日历组件使用详解

    微信小程序可滑动周日历组件使用详解

    这篇文章主要为大家详细介绍了微信小程序可滑动周日历组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • localstorage实现带过期时间的缓存功能

    localstorage实现带过期时间的缓存功能

    这篇文章主要介绍了localstorage实现带过期时间的缓存功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 详解iframe与frame的区别

    详解iframe与frame的区别

    Frame与Iframe两者可以实现的功能基本相同,不过Iframe比Frame具有更多的灵活性,通过本文给大家详解细节iframe与frame的区别,对iframe与frame的区别相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript将坐标字符串转为数组的项目实践

    JavaScript将坐标字符串转为数组的项目实践

    本文主要介绍了JavaScript将坐标字符串转为数组的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01

最新评论