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 showModalDialog 内跳转页面的问题
Nov 25 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
angularjs性能优化的方法
Sep 05 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
基于JavaScript获取base64图片大小
Oct 18 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
php中的登陆login实例代码
2016/06/20 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
浅析vue.js数组的变异方法
2018/06/30 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
python实现文本界面网络聊天室
2018/12/12 Python
python 产生token及token验证的方法
2018/12/26 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
人才市场接收函
2015/01/30 职场文书
PyTorch的Debug指南
2021/05/07 Python
MySQL索引失效场景及解决方案
2022/07/23 MySQL