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 相关文章推荐
实例讲解JS中数组Array的操作方法
May 09 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
webpack入门+react环境配置
Feb 08 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
vue项目中微信登录的实现操作
Sep 08 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的简单采集数据入库程序
2014/07/30 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
动手学习无线电
2021/03/10 无线电
jQuery插件 tabBox实现代码
2010/02/09 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
python实现的分层随机抽样案例
2020/02/25 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
SQL中where和having的区别
2012/06/17 面试题
小学爱国卫生月活动总结
2014/06/30 职场文书
结婚老公保证书
2015/02/26 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang
Golang 结构体数据集合
2022/04/22 Golang