JS--JavaScript使用键盘事件、键盘事件属性（keyCode、charCode、target...）、使用键盘控制页面元素

最新推荐文章于 2023-10-27 09:52:56 发布

吴声子夜歌

最新推荐文章于 2023-10-27 09:52:56 发布

阅读量2.7k

点赞数 7

分类专栏： JavaScript 文章标签： JavaScript JS键盘事件

本文链接：https://blog.csdn.net/cold___play/article/details/101511719

版权

JavaScript 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

键盘事件

当用户操作键盘时会触发键盘事件，键盘事件主要包括下面3种类型：

keydown： 在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Opera浏览器不支持这种连续操作。该事件处理函数返回false时，会取消默认的动作（如输入的键盘字符，在IE和Safari浏览器下还会禁止keypress事件响应）
keypress： 按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回false时，会取消默认的动作（如输入的键盘字符）
keyup： 释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

当获知用户正按下的键码时，可以使用keydown、keypress和keyup事件获取这些信息。其中keydown和keypress事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用keypress事件获取按键信息。虽然所有元素都支持键盘事件，但键盘事件多被应用在表单输入种。

示例：实时捕获键盘操作的各种细节，即键盘响应事件类型及对应的键值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<textarea id="key"></textarea>
		<script>
			var key = document.getElementById("key");
			key.onkeydown = f;//注册keydown事件处理函数
			key.onkeyup = f;//注册keyup事件处理函数
			key.onkeypress = f;//注册keypress事件处理函数
			
			function f(e){
				var e = e || window.event; //标准化事件对象
				var s = e.type + " " + e.keyCode;//获取键盘事件类型和按下的键码
				key.value = s;
			}
		</script>
	</body>
</html>

在这里插入图片描述

键盘事件属性

键盘事件定义了很多属性，如下表。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是ctrKey和shiftKey属性除外，因为它们可以在鼠标事件中存在。例如：当按下【ctrl】或【shift】键时单击鼠标操作。

键盘事件定义的属性：

属性	说明
keyCode	该属性包含键盘中对应键位的键值
charCode	该属性包含键盘中对应键位的Unicode编码，仅DOM支持
target	发生事件的节点（包含元素），仅DOM支持
srcElement	发生事件的元素，仅IE支持
shiftKey	是否按下【Shift】键，如果按下返回true，否则为false
crtlKey	是否按下【Ctrl】键，如果按下返回true，否则为false
altKey	是否按下【Alt】键，如果按下返回true，否则为false
metaKey	是否按下【Meta】键，如果按下返回true，否则为false，仅DOM支持

示例：ctrKey和shiftKey属性可存在于键盘和鼠标事件中，以下示例检测【Ctrl】和【Shift】键是否被同时按下。如果同时按下，且鼠标单击某个页面元素，则会把该元素从页面删除。

document.onclick = function(e){
	var e = e || window.event;
	var t = e.target || e.srcElement; //获取发生事件的元素，兼容IE和DOM
	if(e.ctrlKey && e.shiftKey) //如果同时按下
		t.parentNode.removeChild(t); //移除当前元素
}

keyCode和charCode属性使用比较复杂，但是它们在实际开发中又比较常用，故比较这两个属性在不同事件类型和不同浏览器中的表现是非常必要的，如下表所示：

keyCode和charCode属性值：

属性	IE事件模型	DOM事件模型
keyCode(keypress)	返回所有字符键的正确值，区分大写状态（65-90）和小写状态（97-122）	功能键返回正确值，而【Shift】、【Ctrl】、【Alt】、【PrintScreen】、【ScrollLock】无返回值，其他所有键值都返回0
keyCode(keydown)	返回左右键值（除【PrintScreen】键），字母键都以大写状态显示键值（65-90）	返回左右键值（除【PrintScreen】键），字母键都以大写状态显示键值（65-90）
keyCode(keyup)	返回左右键值（除【PrintScreen】键），字母键都以大写状态显示键值（65-90）	返回左右键值（除【PrintScreen】键），字母键都以大写状态显示键值（65-90）
charCode(keypress)	不支持该属性	返回字符键，区分大写状态（65-90）和小写状态（97-122），而【Shift】、【Ctrl】、【Alt】、【PrintScreen】、【ScrollLock】无返回值，其他所有键值都返回0
charCode(keydown)	不支持该属性	所有键值为0
charCode(keyup)	不支持该属性	所有键值为0

键位和码值对应表：

键位	码值
0~9（数字键）	48~57
A~Z（字母键）	65~90
Backspace（退格键）	8
Tab（制表键）	9
Enter（回车键）	13
Space（空格键）	32
Left arrow（左箭头）	37
Top arrow（上箭头）	38
Right arrow（右箭头）	39
Down arrow（下箭头）	40

示例：使用方向键控制页面元素的移动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box"></div>
		<script>
			var box = document.getElementById("box");
			box.style.position = "absolute";
			box.style.width = "20px";
			box.style.height = "20px";
			box.style.backgroundColor = "blue";
			document.onkeydown = keyDown;
			
			function keyDown(){
				var event = event || window.event;
				switch(event.keyCode){
					case 37 :
						box.style.left = box.offsetLeft - 5 + "px";
						break;
					case 39 :
						box.style.left = box.offsetLeft + 5 + "px";
						break;
					case 38 :
						box.style.top = box.offsetTop - 5 + "px";
						break;
					case 40 :
						box.style.top = box.offsetTop + 5 + "px";
						break;
				}
				return false;
			}
		</script>
	</body>
</html>

在这里插入图片描述

吴声子夜歌

关注

7
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
JS--JavaScript使用键盘事件、键盘事件属性（keyCode、charCode、target...）、使用键盘控制页面元素

键盘事件当用户操作键盘时会触发键盘事件，键盘事件主要包括下面3种类型：keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Opera浏览器不支持这种连续操作。该事件处理函数返回false时，会取消默认的动作（如输入的键盘字符，在IE和Safari浏览器下还会禁止keypress事件响应）keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发...
复制链接

扫一扫