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 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
vue中用 async/await 来处理异步操作
Jul 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
php生成随机数或者字符串的代码
2008/09/05 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
php实现的RSS生成类实例
2015/04/23 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
javascript如何创建对象
2016/08/29 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
行政经理岗位职责
2013/11/09 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
标准版离职证明书
2014/09/12 职场文书
2014年社区民政工作总结
2014/12/02 职场文书