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

 更新时间:2010年06月08日 00:04:48   作者:  
js客户端快捷键管理类的较完整实现和应用,需要的朋友可以参考下。
复制代码 代码如下:

//一个快捷键对象
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>

相关文章

  • Function.prototype.bind用法示例

    Function.prototype.bind用法示例

    想必大家对Function.prototype.bind并不陌生吧,下面为大家介绍下它的简单调用及DOM调用,感兴趣的朋友可以参考下
    2013-09-09
  • JavaScript中数组去重的5种方法

    JavaScript中数组去重的5种方法

    这篇文章主要介绍了JavaScript中数组去重的5种方法,文中讲解非常详细,实例代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • JavaScript 微任务和宏任务讲解

    JavaScript 微任务和宏任务讲解

    这篇文章主要分享了JavaScript 微任务和宏任务讲解,在js中,我们一般将所有的任务都分成两类,一种是同步任务,另外一种是异步任务。而在异步任务中,又有着更加细致的分类,那就是微任务和宏任务,下面来一起学习js中的微任务和宏任务吧
    2021-12-12
  • JavaScript Event学习补遗 addEventSimple

    JavaScript Event学习补遗 addEventSimple

    这里有个addEventSimple和removeEventSimple函数,有时候需要不那么显眼的事件处理程序的时候我就用这两个函数注册。
    2010-02-02
  • 判断客户端浏览器是否安装了Flash插件的多种方法

    判断客户端浏览器是否安装了Flash插件的多种方法

    各种方法判断客户端浏览器是否安装了Flash插件,对于必须要支持flash才能浏览的页面来说,提前做下说明,用户体验会更好。
    2010-08-08
  • js this函数调用无需再次抓获id,name或标签名

    js this函数调用无需再次抓获id,name或标签名

    this就是你当前要执行的js所抓获的节点,这样在js里就可以不用document.getElement之类的写法来抓获id,name或标签名,具体示例如下
    2014-03-03
  • 轻松理解JavaScript闭包

    轻松理解JavaScript闭包

    闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包。下面跟着小编一起来看下吧
    2017-03-03
  • js使用正则实现ReplaceAll全部替换的方法

    js使用正则实现ReplaceAll全部替换的方法

    JS 没有提供replaceAll这样的方法。使用正则表可以达成Replace 的效果,感兴趣的朋友看看下面的示例
    2014-08-08
  • 通过封装scroll.js 获取滚动条的值

    通过封装scroll.js 获取滚动条的值

    本文通过实例代码给大家介绍了通过封装scroll.js 获取滚动条的值的相关知识,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • 图解JavaScript作用域链底层原理

    图解JavaScript作用域链底层原理

    当代码在一个环境中执行时,会创建变量对象的一个作用域链,作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问,下面这篇文章主要给大家介绍了关于JavaScript作用域链底层原理的相关资料,需要的朋友可以参考下
    2021-11-11

最新评论