键盘事件

最新推荐文章于 2022-06-13 12:52:40 发布

MrShyZhang

最新推荐文章于 2022-06-13 12:52:40 发布

阅读量765

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript 键盘事件小钢琴demo

本文链接：https://blog.csdn.net/thunderevil35/article/details/80487665

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

键盘事件

1. onkeydown 键盘按下

触发条件：当键盘被按下的时候触发

用法：

document.onkeydown = function (e) {
     console.log("键盘按下")
}

2. onkeyup 键盘抬起

触发条件：当键盘被抬起的时候触发

用法：

document.onkeyup = function (e) {
      console.log("键盘抬起")
}

3. onkeypress 字符输入

触发条件：当有字符输入的时候触发。当字符键被按下的时候触发

用法：

document.onkeypress = function (e) {
	if (e.keyCode == 13) {
		console.log("点击回车了")
	}
	console.log("有字符输入")
}

事件对象：

e.key 键盘键对应的字符

e.keyCode 键盘键对应的编码是一个数字

常用的编码： 13 回车 32 空格 37 ← 38 ↑ 39 → 40 ↓

尝试给一个div绑定键盘事件

如果想让一个div绑定键盘事件，直接绑定键盘事件是不行的，div元素不像是表单元素input等可以直接添加，必须让div先获取焦点，这样引出了一个标准属性 tabIndex="xxx(里面是数字代表顺序)"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 400px;
			height: 400px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="box" tabIndex="1"></div>
	<input type="text" id="input" tabIndex="2">
	<script type="text/javascript">
		// 获取元素
		var box = document.getElementById("box");
		var input = document.getElementById("input");
		// 给box绑定键盘事件
		box.onkeydown = function() {
			console.log("键盘按下了")
		}

		// onfocus 
		input.onfocus = function() {
			console.log("获取焦点")
		}
		// onblur
		input.onblur = function() {
			console.log("失去焦点")
		}

		// 结论： 如果想要div元素绑定键盘事件， 必须让div先获取焦点， 绑定方式： tabIndex="x"
	</script>
</body>
</html>

tabIndex属性

该属性是每一个元素都具备的html标准属性。该属性的值是一个数字。该数字决定用户按下tab键时，光标（焦点）的切换顺序。 div上的键盘事件必须在div具备tabindex属性值的时候，并且还得被选中才可以触发。

tabIndex 是html的标准属性。每个元素都可以添加。当用户失去鼠标的时候，可通过键盘上的tab键来切换获取页面上元素的焦点。

tab键是按照tabIndex的值的大小顺序顺序切换元素焦点。

tab + shift键是按照tabIndex的值的大小顺序逆序切换元素焦点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
	<ul id="list">
		<li tabIndex="9">1</li>
		<li tabIndex="8">2</li>
		<li tabIndex="7">3</li>
		<li tabIndex="6">4</li>
		<li tabIndex="5">5</li>
		<li tabIndex="4">6</li>
		<li tabIndex="3">7</li>
		<li tabIndex="2">8</li>
		<li tabIndex="1">9</li>
	</ul>
</body>
</html>

实现一个按1234567键弹钢琴的的demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#list {
			width: 700px;
			height: 400px;
			margin: 0 auto;
		}
		li {
			float: left;
			list-style: none;
			width: 100px;
			height: 100%;
			border: 1px solid blue;
			box-sizing: border-box;
			border-right: none;
		}
		#list li:last-child {
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<ul id="list">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<audio id="audio" autoplay></audio>
	<script type="text/javascript">
	// 获取所有li
	var lis = document.getElementsByTagName("li");
	var audio = document.getElementById("audio")
	// 添加键盘事件
	document.onkeydown = function(e) {
		// 查看时间对象中的哪个属性可以获取输入的字符
		// console.log(e.key)
		// 进行判定
		switch (e.key) {
			case "1":
			case "2":
			case "3":
			case "4":
			case "5":
			case "6":
			case "7":
				lis[e.key - 1].style.backgroundColor = "red";
				audio.src = "audio/" + e.key + ".mp3";
				break;
			default:
				console.log("按错了");
				break;
		}
	}
	// 添加onkeyup
	document.onkeyup = function(e) {
		// 查看时间对象中的哪个属性可以获取输入的字符
		// console.log(e.key)
		// 进行判定
		switch (e.key) {
			case "1":
			case "2":
			case "3":
			case "4":
			case "5":
			case "6":
			case "7":
				lis[e.key - 1].style.backgroundColor = "white";
				break;
			default:
				console.log("按错了");
				break;
		}
	}
	</script>
</body>
</html>

MrShyZhang

关注

2
点赞
踩
5

收藏

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

键盘事件 1. onkeydown 键盘按下触发条件：当键盘被按下的时候触发用法：document.onkeydown = function (e) { console.log("键盘按下")} 2. onkeyup 键盘抬起触发条件：当键盘被抬起的时候触发用法：document.onkeyup = funct...
复制链接

扫一扫