一个通用的键盘快捷键处理JS

最新推荐文章于 2023-05-17 14:34:54 发布

原创最新推荐文章于 2023-05-17 14:34:54 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#function #input #button #action #table #null

JVASCRIPT 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种通用的键盘快捷键处理方法，通过JavaScript实现，支持单键与组合键操作。该方法允许开发者轻松地为网页应用添加快捷键功能，包括方向键导航和常见组合键如Ctrl+S、Ctrl+Enter等。

最近比较无聊！！！！！写了一个通用的键盘快捷键处理方法,handler.js文件如下：

////////////////////////////////////////////////////////////////////////////////
  /**
	*--------------- 键盘快捷键处理 -----------------
	*
	* 功能:设置键盘快捷操作
	* 使用说明:可直接看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>