/**
*--------------- 键盘快捷键处理 -----------------
*
* 功能:设置键盘快捷操作
* 使用说明:可直接看keyhandler.html里面的示例
* 1.在页面结尾处引入此js文件.
*
* 2.在文档结尾部分设置键盘键函数.
*
* 3.单键处理:
* //向下方向键 keyCode为40
* document.body.addKeyDown(40, function(){
* //TODO 操作内容
* });
*
* 4.组合键处理:
* Alt、Shift、Ctrl组合别的键:
* //Ctrl+S S的keyCode为83
* document.body.addKeyDown(83, function(){
* if (window.event.ctrlKey){
* //TODO 操作内容
* }
* });
* 普通组合键有点麻烦，在现实中用的也比较少，keyhandler.html中有q+w的组合例子。
* 超过两个以上的键，目前尚未知如何处理。
*
* 5.此JS中默认提供了CTRL+S,CTRL+ENTER,ALT+ENTER,SHIFT+ENTER四个组合键
* 只需要实现具体的function:f_ctrl_s();f_ctrl_enter();f_alt_enter();f_shift_enter();
*
* 6.关于keyCode:所有的键盘键event都有对应的keyCode值，如S的keyCode为83，或者直接设置"S"，系统自动获取keyCode值。
*
* @author yehailong 20060118
*
*--------------- 键盘快捷键处理 -----------------
*/
///
function addKeyHandler(element) {
element._keyObject = new Array();
element._keyDisable = new Array();
//系统捕获键盘键的keydown、keyup、keypress等事件操作，采用关联数组的方式定义
element._keyObject["keydown"] = new Array();
element._keyObject["keyup"] = new Array();
element._keyObject["keypress"] = new Array();
element._keyDisable["keydown"] = new Array();
element._keyDisable["keyup"] = new Array();
element._keyDisable["keypress"] = new Array();
//增加快捷键
element.addKeyDown = function (keyCode, action) {
element._keyObject["keydown"][getKeyCode(keyCode)] = action;
}
//释放快捷键
element.removeKeyDown = function (keyCode) {
element._keyDisable["keydown"][getKeyCode(keyCode)] = true;
}
//恢复快捷键
element.restoreKeyDown = function (keyCode) {
if(element._keyObject["keydown"][getKeyCode(keyCode)]!=null){
element._keyDisable["keydown"][getKeyCode(keyCode)] = false;
}
}
element.addKeyUp = function (keyCode, action) {
element._keyObject["keyup"][keyCode] = action;
}
element.removeKeyUp = function (keyCode) {
element._keyDisable["keyup"][keyCode] = true;
}
element.restoreKeyUp = function (keyCode) {
if(element._keyObject["keyup"][keyCode]!=null){
element._keyDisable["keyup"][keyCode] = false;
}
}
element.addKeyPress = function (keyCode, action) {
element._keyObject["keypress"][keyCode] = action;
}
element.removeKeyPress = function (keyCode) {
element._keyDisable["keypress"][keyCode] = true;
}
element.restoreKeyPress = function (keyCode) {
if(element._keyObject["keypress"][keyCode]!=null){
element._keyDisable["keypress"][keyCode] = false;
}
}
//获取keyCode
function getKeyCode(keyCode){
//如果是数字
if(0+keyCode==keyCode){
return keyCode;
}else{
keyCode = keyCode.toUpperCase();
return keyCode.charCodeAt(0);
}
}
function handleEvent() {
var type = window.event.type;
var code = window.event.keyCode;
//相应键盘键function
if (element._keyObject[type][code] != null) {
if(element._keyDisable[type][code]=="undefined"
||!element._keyDisable[type][code]){
if(event.keyCode!=getKeyCode("/r")){
window.event.returnValue = false;
}
//try{
element._keyObject[type][code]();
//}catch(e){}
}
}
}
element.onkeypress = handleEvent;
element.onkeydown = handleEvent;
element.onkeyup = handleEvent;
}
//捕获键
addKeyHandler(document.body);
//----预先定义了一些快捷键操作，具体的实现函数需要在对应的页面中提供----------//
//Ctrl+S
document.body.addKeyDown("S", function(){
if (window.event.ctrlKey){
//TODO 需要提供具体的函数实现
f_ctrl_s();
}
});
//ENTER 键操作
document.body.addKeyDown("/r", function(){
if (window.event.ctrlKey){
//TODO CTRL+ENTER
f_ctrl_enter();
}else if (window.event.altKey){
//TODO ALT+ENTER
f_alt_enter();
}else if (window.event.shiftKey){
//TODO SHIFT+ENTER
f_shift_enter();
}else{
var source = event.srcElement;
if(source.tagName == "INPUT" && (source.type =="button" || source.type=="submit")){
event.keyCode=32;
}else {
event.keyCode = 9;
}
}
});
对应的测试html如下，提供键盘方向键快捷跳转，以及ctrl组合键等:
<body >
可使用上下左右方向键切换：
<table id="table1" border=1>
<tr>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
</tr>
<tr>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
</tr>
<tr>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
</tr>
<tr>
<td>
<select name="test" onfocus="setFocus(this)" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
<td>
<select name="test" onfocus="setFocus(this)" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
<td>
<select name="test" onfocus="setFocus(this)" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
<td><input type="text" name="test" onfocus="setFocus(this)"></td>
</td>
</tr>
</table>
<input type="button" id="b1" value="Ctrl+Enter" onclick="alert(this.value)">
<input type="button" id="b2" value="Alt+Enter" onclick="alert(this.value)">
<input type="button" id="b3" value="Shift+Enter" onclick="alert(this.value)">
<input type="button" id="b4" value="Ctrl+S" onclick="alert(this.value)">
<input type="button" id="b5" value="Q+W" onclick="alert(this.value)">
<span id="msg"></span>
</body>
<SCRIPT src="keyhandler.js" ></SCRIPT>
<script>
//------------以下为设置焦点,键盘方向快捷键-----------//
//一行的input个数
var size = 0;
var focusObj = null;
var updown = true;
//对象焦点定位
function setFocus(obj){
try{
if(obj.type=="text"){
var rng = obj.createTextRange(); rng.collapse(false); rng.select();
}
}catch(e){}
if(obj.tagName == "SELECT"){
updown = false;
}else{
updown = true;
}
focusObj = obj;
restoreKey();
}
var allInput = new Array();
var doFlag = false;
//setArray();
function setArray(){
if(!doFlag){
var k = 0;
var table = document.getElementById("table1");
for(var i = 0; i < table.rows.length; i++){
var cells = table.rows[i].cells;
for(var j=0;j<cells.length;j++){
//取childNodes[0]，如果input外套<span>、<div>等标签，根据实际情况调整
var box = cells[j].childNodes[0];
if(box!=null&&(box.type=="text"||box.tagName=="SELECT")){
allInput[k] = box;
k++;
if(i==0) size++;
}
}
}
doFlag = true;
}
}
function down(){
//向下
go(size);
}
function up(){
//向上
go(0-size);
}
function left(){
//向左
go(-1);
}
function right(){
//向右
go(1);
}
function go(num){
setArray();
var index = -1;
for(var i=0;i<allInput.length;i++){
if(focusObj==allInput[i]){
index = i;
break;
}
}
if(index==-1)
return false;
index += num;
if(index>allInput.length-1)index = index-allInput.length;
if(index<0)index = allInput.length+index;
try{
allInput[index].focus();
}catch(e){}
}
function restoreKey(){
//恢复上下键
document.body.restoreKeyDown(40);
document.body.restoreKeyDown(38);
}
//捕获键盘事件
//addKeyHandler(document.body);
document.body.addKeyDown(40, function(){
if(updown){
down();
}else{
//select定位时候，还需要正常的上下键
document.body.removeKeyDown(40);
}
});
document.body.addKeyDown(38, function(){
if(updown){
up();
}else{
//select定位时候，还需要正常的上下键
document.body.removeKeyDown(38);
}
});
document.body.addKeyDown(39, function(){
right();
});
document.body.addKeyDown(37, function(){
left();
});
//------------键盘方向快捷键ok-----------//
//------------组合快捷键测试-----------//
//Q+W
var w=false, q=false;
document.body.addKeyDown(81, function() {
q = true;
if (q && w) {
document.getElementById("msg").innerHTML="Q＋W";
}
});
document.body.addKeyUp(81, function() {
q = false;
document.getElementById("msg").innerHTML="";
});
document.body.addKeyDown(87, function() {
w = true;
if (q && w) {
document.getElementById("msg").innerHTML="Q＋W";
}
});
document.body.addKeyUp(87, function() {
w = false;
document.getElementById("msg").innerHTML="";
});
//实现默认提供的几个快捷键
//CTRL+S
function f_ctrl_s(){
document.getElementById("b4").click();
}
function f_ctrl_enter(){
document.getElementById("b1").click();
}
function f_alt_enter(){
document.getElementById("b2").click();
}
function f_shift_enter(){
document.getElementById("b3").click();
}
</script>
|
|
1791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
