js客户端快捷键管理类的较完整实现和应用


Posted in Javascript onJune 08, 2010
//一个快捷键对象 
function KeyOne(id, keys, dom, isfun, fun,iskeydown) { 
this.id = id; 
this.keys = keys; 
this.dom = dom; 
this.isfun = isfun; 
this.fun = fun; 
this.isKeydown = iskeydown; 
} //快捷键管理类 
var KeyConlor = {}; 
KeyConlor.list = new Array(); 
//添加一个快捷键绑定焦点(当快捷键被激发时让焦点落在指定id对象上) 
//使用说明key的值如果是“c,50”则表示“ctrl”和键码为50的组合键 
// "a,50" 则表示“alt”和键码为50的组合键 
// "s,50" 则表示“shift”和键码为50的组合键 
// "50" 则表示键码为50的单键(建议使用组合键alt) 
//id指的是快捷键对应的焦点对象。 
//dom指的是id对象所在的document对象 
KeyConlor.addkeyfouse = function(id, key, dom, iskyedown) { 
var keyone = new KeyOne(id, key, dom, false, null, iskyedown); 
if (KeyConlor.KeyIsOK(keyone)) { 
KeyConlor.list.push(keyone); 
} else { 
alert("快捷键"+keyone.keys+"已经被注册 不能重复注册了"); 
return false; 
} 
}; 
//快捷键绑定方法(当快捷键激发时触发方法) 
KeyConlor.addkeyfun = function(key, fun, iskeydown) { 
var keyone = new KeyOne("", key, "", true, fun, iskeydown); 
if (KeyConlor.KeyIsOK(keyone)) { 
KeyConlor.list.push(keyone) 
} else { 
alert("快捷键:" + keyone.keys + ";已经被注册 .重复注册无效"); 
return false; 
} 
}; 
//--删除一个快捷键 
//KeyConlor.removeFouseKey = function(id) { 
// var keyone = new KeyOne(id, ""); 
// for (var i = 0; i < KeyConlor.list.length; i++) { 
// if (keyone.id == KeyConlor.list[i].id) { 
// KeyConlor.list[i] = null; 
// } 
// } 
//}; 
//--判断快捷键是不是重复注册 
KeyConlor.KeyIsOK = function(keyone) { 
for (var i = 0; i < KeyConlor.list.length; i++) { 
if (KeyConlor.list[i].keys == keyone.keys) { 
return false; 
} 
} 
return true; 
}; 
document.onkeydown = function() { 
for (var i = 0; i < KeyConlor.list.length; i++) { 
var keyone = KeyConlor.list[i]; 
if (!keyone.isKeydown) continue; 
var control = keyone.keys.split(",")[0]; 
switch (control) { 
case 's': 
var code = keyone.keys.split(",").length > 1 ? keyone.keys.split(",")[1] : keyone.keys.split(",")[0]; 
if (event.shiftKey == true && event.keyCode == code) { 
//获得焦点 
if (!keyone.isfun) { 
keyone.dom.getElementById(keyone.id).focus(); 
} else { 
keyone.fun(); 
} 
event.keyCode=0; 
return false; 
} 
break; 
case 'c': 
var code = keyone.keys.split(",").length > 1 ? keyone.keys.split(",")[1] : keyone.keys.split(",")[0]; 
if (event.ctrlKey == true && event.keyCode == code) { 
//获得焦点 
if (!keyone.isfun) { 
keyone.dom.getElementById(keyone.id).focus(); 
} else { 
keyone.fun(); 
} 
event.keyCode=0; 
return false; 
} 
break; 
case 'a': 
var code = keyone.keys.split(",").length > 1 ? keyone.keys.split(",")[1] : keyone.keys.split(",")[0]; 
if (event.altKey == true && event.keyCode == code) { 
//获得焦点 
if (!keyone.isfun) { 
keyone.dom.getElementById(keyone.id).focus(); 
} else { 
keyone.fun(); 
} 
event.keyCode=0; 
return false; 
} 
event.keyCode=0; 
break; 
default: 
//获得焦点 
var code = keyone.keys.split(",").length > 1 ? keyone.keys.split(",")[1] : keyone.keys.split(",")[0]; 
if (event.keyCode == code && event.altKey == false && event.ctrlKey == false && event.shiftKey == false) { 
if (!keyone.isfun) { 
keyone.dom.getElementById(keyone.id).focus(); 
} else { 
keyone.fun(); 
} 
event.keyCode=0; 
return false; 
} 
break; 
} 
} 
}; 
document.onkeyup = function() { 
for (var i = 0; i < KeyConlor.list.length; i++) { 
var keyone = KeyConlor.list[i]; 
if (keyone.isKeydown) continue; 
var control = keyone.keys.split(",")[0]; 
switch (control) { 
case 's': 
var code = keyone.keys.split(",").length > 1 ? keyone.keys.split(",")[1] : keyone.keys.split(",")[0]; 
if (event.shiftKey == true && event.keyCode == code) { 
//获得焦点 
if (!keyone.isfun) { 
keyone.dom.getElementById(keyone.id).focus(); 
} else { 
keyone.fun(); 
} 
event.keyCode=0; 
return false; 
} 
break; 
case 'c': 
var code = keyone.keys.split(",").length > 1 ? keyone.keys.split(",")[1] : keyone.keys.split(",")[0]; 
if (event.ctrlKey == true && event.keyCode == code) { 
//获得焦点 
if (!keyone.isfun) { 
keyone.dom.getElementById(keyone.id).focus(); 
} else { 
keyone.fun(); 
} 
event.keyCode=0; 
return false; 
} 
break; 
case 'a': 
var code = keyone.keys.split(",").length > 1 ? keyone.keys.split(",")[1] : keyone.keys.split(",")[0]; 
if (event.altKey == true && event.keyCode == code) { 
//获得焦点 
if (!keyone.isfun) { 
keyone.dom.getElementById(keyone.id).focus(); 
} else { 
keyone.fun(); 
} 
event.keyCode=0; 
return false; 
} 
break; 
default: 
//获得焦点 
var code = keyone.keys.split(",").length > 1 ? keyone.keys.split(",")[1] : keyone.keys.split(",")[0]; 
if (event.keyCode == code && event.altKey == false && event.ctrlKey == false && event.shiftKey == false) { 
if (!keyone.isfun) { 
keyone.dom.getElementById(keyone.id).focus(); 
} else { 
keyone.fun(); 
} 
event.keyCode=0; 
return false; 
} 
break; 
} 
} 
}; 
//常用键盘码 
var keyCodeStr = { 
Alt: "a", 
Shift: "s", 
Ctrl: "c", 
Up: "38", 
Down: "40", 
Left: "37", 
Right: "39", 
Esc: "27", 
Enter: "13", 
Backspace: "8", 
Delete: "46", 
Tab: "9", 
CapsLK: "20", 
Space: "32" 
}; 
[code] 
----------以上是js类------------------------------- 
[code] 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="KyeControl.js" type="text/javascript"></script> 
<script type="text/javascript"> 
KeyConlor.addkeyfun(keyCodeStr.Ctrl+","+"70",function (){alert("哈哈");},true); 
KeyConlor.addkeyfouse("2","65",document,true); 
</script> 
</head> 
<body> 
<form id="form1" > 
<div> 
<input type="text" id="2" /> 
<input type="text" id="3" /> 
<input type="text" id="4" /> 
<input type="text" id="5" /> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
Javascript的构造函数和constructor属性
Jan 09 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
location.search在客户端获取Url参数的方法
Jun 08 #Javascript
js word表格动态添加代码
Jun 07 #Javascript
Extjs中常用表单介绍与应用
Jun 07 #Javascript
javascript调试说明
Jun 07 #Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 #Javascript
javascript下数值型比较难点说明
Jun 07 #Javascript
jQuery源码分析之Event事件分析
Jun 07 #Javascript
You might like
PHP new static 和 new self详解
2017/02/19 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
c++生成dll使用python调用dll的方法
2014/01/20 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
python实现按行分割文件
2019/07/22 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
创先争优活动方案
2014/02/12 职场文书
毕业寄语大全
2014/04/09 职场文书
触电现场处置方案
2014/05/14 职场文书
小学假期安全广播稿
2014/09/28 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
承诺保证书格式
2015/02/28 职场文书
信仰纪录片观后感
2015/06/08 职场文书
阿凡达观后感
2015/06/10 职场文书
开学第一周总结
2015/07/16 职场文书
医德医风学习心得体会
2016/01/25 职场文书
利用python进行数据加载
2021/06/20 Python
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs