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 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
js简单实现交换Li的值
May 22 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
详细分析Node.js 模块系统
Jun 28 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 删除cookie方法详解
2014/12/01 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
iView框架问题整理小结
2018/10/16 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
市场营销方案范文
2014/03/11 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
工作失职检讨书
2015/01/26 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android