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>

(0)

相关推荐

  • 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(); /

  • Android10 客户端事务管理ClientLifecycleManager源码解析

    目录 正文 ClientLifecycleManager ClientTransaction TransactionExecutor executeLifecycleState 正文 在Android 10 App启动分析之Activity启动篇(二)一文中,简单地介绍了Activity的生命周期管理器是如何调度Activity进入onCreate生命周期的流程.这篇文章,我们将详细地分析framework中activity的生命周期管理功能,从更宏观的角度来更全面地了解生命周期及相关事务的工作

  • thinkPHP框架可添加js事件的分页类customPage.class.php完整实例

    本文实例讲述了thinkPHP框架可添加js事件的分页类customPage.class.php.分享给大家供大家参考,具体如下: 用于ajax动态加载数据的分页类,分页事件可以动态添加,去除了a链接中的href地址. <?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK IT ] // +----------

  • Python通过websocket与js客户端通信示例分析

    具体的 websocket 介绍可见 http://zh.wikipedia.org/wiki/WebSocket 这里,介绍如何使用 Python 与前端 js 进行通信. websocket 使用 HTTP 协议完成握手之后,不通过 HTTP 直接进行 websocket 通信. 于是,使用 websocket 大致两个步骤:使用 HTTP 握手,通信. js 处理 websocket 要使用 ws 模块: Python 处理则使用 socket 模块建立 TCP 连接即可,比一般的 soc

  • js+div+css下拉导航菜单完整代码分享

    效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm 下拉菜单 js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • 封装了一个Java数据库访问管理类

    复制代码 代码如下: package com.groundhog.codingmouse; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; /** * 数据库管理类 * @author CodingMouse * 2009.2.20 */ pub

  • js 客户端打印html 并且去掉页眉、页脚的实例

    print() 方法用于打印当前窗口的内容,支持部分或者整个网页打印. 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮.通常,这会产生一个对话框,让用户可以取消或定制打印请求. win10下测试ie11.chrome.firefox.360.edge 都可以成功去掉页眉页脚: <!DOCTYPE html> <html> <head> <title>打印</title> <meta charset="utf-8

  • 浅析JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS类的继承</title> </head> <body> /* -- 类式继承 -- */ <script type="text/javascript"> //先声明一个超类 var Animal = function

  • js实现会跳动的日历效果(完整实例)

    一.简介 编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下: 年月日,周几,时分秒都会随着系统时间的走动而改变 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • JavaScript知识点总结(十一)之js中的Object类详解

    JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1

随机推荐