HTML DOM 事件 —— 键盘事件 JS键盘事件

brains丶小白

已于 2022-09-01 16:56:52 修改

阅读量4.7k

点赞数 2

文章标签： javascript html 前端 html5 开发语言

于 2022-08-31 10:26:47 首次发布

本文链接：https://blog.csdn.net/yxd0724/article/details/126617176

版权

键盘事件

如果想实现快捷的页面操作，或者是一些前端的游戏，了解键盘事件很重要；
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开

这些键盘事件可以使用于除了：
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>其它所有HTML 元素

键盘键值对应的键值码（ascii码）

在这里插入图片描述

onkeydown 键盘按下事件

定义和用法：onkeydown 事件会在用户按下一个键盘按键时发生。
如果长按这个按键没松开，那么就会一直调用onkeydown 的方法；
提示：与 onkeydown 事件相关联的事件触发次序:

onkeydown 键盘按下事件
onkeypress 键盘按下并松开事件
onkeyup 键盘松开事件

下面代码可以通过输入框聚焦之后，获取在键盘上按键的所有值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onkeydown</title>
		<script>
			function myFunction() {
				console.log(event) // 对应按键对象所有属性
				document.getElementById("domKey").innerHTML = event.key
				document.getElementById("domCode").innerHTML = event.code
				document.getElementById("domAscii").innerHTML = event.which
			}
		</script>
	</head>
	<body>
		<p>当你在输入框内按下一个按键是函数被触发</p>
		<input type="text" onkeydown="myFunction()">
		<p>按下按键的Key：<span id="domKey"></span></p>
		<p>按下按键的Code：<span id="domCode"></span></p>
		<p>按下按键的ascii码：<span id="domAscii"></span></p>
	</body>
</html>

了解以上代码逻辑之后，实现一个简单的效果：
需求：控制一个小方块在页面中的移动，上 — w，下 — s，左 — a ，右 — d，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onkeydown</title>
		<style type="text/css">
			body {
				position: relative;
			}
			#boxId {
				position: absolute;
				top: 60;
				left: 60;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background-color: red;
			}
		</style>
		<script>
			let domTop = 60; // 初始化
			let domLeft = 60;
			// 这里只做了上和左的碰撞校验
			// 直接将方法丢给body全局触发
			// 一直按住按键也可以一直移动
			function myFunction() {
				let boxDom = document.getElementById("boxId")
				if (event.which == 87) { // 上 w 87
					if (domTop > 0) {
						domTop -= 10;
					}
				} else if (event.which == 68) { // 右 d  68
					domLeft += 10;
				} else if (event.which == 83) { // 下 s 83
					domTop += 10;
				} else if (event.which == 65) { // 左 a 65
					if (domLeft > 0) {
						domLeft -= 10;
					}
				}
				boxDom.style.top = domTop + "px";
				boxDom.style.left = domLeft + "px";
			}
		</script>
	</head>
	<body onkeydown="myFunction()">
		<div id="boxId"></div>
	</body>
</html>

onkeyup 键盘松开事件

onkeyup 事件会在键盘按键被松开时发生
提示：onkeyup 与 onkeydown 的区别：onkeyup 事件只能一次一次的触发，不能像onkeydown 长按持续触发

下面函数将字符转换为大写：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onkeyup</title>
		<script>
			function myFunction() {
				var x = document.getElementById("fname");
				x.value = x.value.toUpperCase();
			}
		</script>
	</head>
	<body>
		<p>当用户在输入字段释放一个按键时触发函数。函数将字符转换为大写。</p>
		输入你的名称: <input type="text" id="fname" onkeyup="myFunction()">
	</body>
</html>

onkeypress 键盘按键被按下并松开

onkeypress 事件会在键盘按键被按下并释放一个键时发生
注意：在所有浏览器中 onkeypress 事件只能监听字母和数字，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、箭头等）。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件

下面函数将字符转换为大写：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onkeypress</title>
		<script>
			function myFunction() {
				alert("你在输入框内按下一个按键");
			}
		</script>
	</head>
	<body>
		<p>当用户在输入框内按下一个按键时函数被触发</p>
		<input type="text" onkeypress="myFunction()">
	</body>
</html>