105_键盘事件对象

最新推荐文章于 2022-03-20 20:44:43 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-03-20 20:44:43 发布

阅读量579

点赞数

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/aihiao/article/details/121252801

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

1. 当发生keydown、keypress和 keyup事件时, 它们的执行函数都会传递KeyboardEvent(键盘事件对象)参数。

2. KeyboardEvent.ctrlKey事件属性

2.1. KeyboardEvent.ctrlKey指示当事件发生时, Ctrl键是否被按下并保持住。可返回一个布尔值, 按下状态(true), 释放状态(false)。它是一个只读属性。

3. KeyboardEvent.altKey事件属性

3.1. KeyboardEvent.altKey指示在指定的事件发生时, Alt键是否被按下并保持住了。可返回一个布尔值, 按下状态(true), 释放状态(false)。它是一个只读属性。

4. KeyboardEvent.shiftKey事件属性

4.1. KeyboardEvent.shiftKey指示当事件发生时, "Shift"键是否被按下并保持住。可返回一个布尔值, 按下状态(true), 释放状态(false)。它是一个只读属性。

5. KeyboardEvent.metaKey事件属性

5.1. KeyboardEvent.metaKey指示当事件发生时, "meta"键是否被按下并保持住。可返回一个布尔值, 按下状态(true), 释放状态(false)。它是一个只读属性。

6. KeyboardEvent.repeat事件属性

6.1. KeyboardEvent.repeat是一个只读属性, 返回一个布尔值Boolean, 如果按键被一直按住, 返回值为true。

7. KeyboardEvent.code事件属性

7.1. KeyboardEvent.code是一个只读属性, 表示键盘上的物理键, 此属性返回一个String类型的值(键盘上的每一个键都有唯一的code值), 该值不会被键盘布局或修饰键的状态改变。

8. KeyboardEvent.key事件属性

8.1. KeyboardEvent.key是一个只读属性, 返回用户按下的物理按键的值。它还与shiftKey等调节性按键的状态和键盘布局有关。

9. 例子

9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>键盘事件对象(KeyboardEvent)</title>
	</head>
	<body>
		<p>请按下键盘上的任意键: <br /></p>

		<script type="text/javascript">
			var myP = document.querySelector("p");

			// 这里添加事件去掉on前缀
			document.body.addEventListener("keydown", mykeydown, false);
			document.body.addEventListener("keypress", mykeypress, false);
			document.body.addEventListener("keyup", mykeyup, false);

			function mykeydown(e){ // e是KeyboardEvent对象
				myP.innerHTML += ("onkeydown [ctrlKey: " + e.ctrlKey + ", altKey: " + e.altKey + ", shiftKey: " + e.shiftKey + ", metaKey: " + e.metaKey 
					+ ", repeat: " + e.repeat + ", code: " + e.code + ", key: " + e.key + "<br />");
			}

			function mykeypress(e){ // e是KeyboardEvent对象
				myP.innerHTML += ("onkeypress [ctrlKey: " + e.ctrlKey + ", altKey: " + e.altKey + ", shiftKey: " + e.shiftKey + ", metaKey: " + e.metaKey 
					+ ", repeat: " + e.repeat + ", code: " + e.code + ", key: " + e.key + "<br />");
			}

			function mykeyup(e){ // e是KeyboardEvent对象
				myP.innerHTML += ("onkeyup [ctrlKey: " + e.ctrlKey + ", altKey: " + e.altKey + ", shiftKey: " + e.shiftKey + ", metaKey: " + e.metaKey 
					+ ", repeat: " + e.repeat + ", code: " + e.code + ", key: " + e.key + "<br />");
			}
		</script>
	</body>
</html>

9.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
105_键盘事件对象

1. 当发生keydown、keypress和 keyup事件时, 它们的执行函数都会传递KeyboardEvent(键盘事件对象)参数。2. KeyboardEvent.ctrlKey事件属性2.1.KeyboardEvent.ctrlKey指示当事件发生时, Ctrl键是否被按下并保持住。可返回一个布尔值, 按下状态(true), 释放状态(false)。它是一个只读属性。3. KeyboardEvent.altKey事件属性3.1.KeyboardEvent.altKey指示在指定..
复制链接

扫一扫

专栏目录