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

所属分类: 网络编程 / JavaScript 阅读数: 1025
收藏 0 赞 0 分享
复制代码 代码如下:

//一个快捷键对象
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>
更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多