24 【键盘事件】
约 1261 字大约 4 分钟...
24 【键盘事件】
1.键盘事件的种类
键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。
keydown：按下键盘时触发。keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。keyup：松开键盘时触发该事件。
如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下。
- keydown
- keypress
- keydown
- keypress
- ...（重复以上过程）
- keyup
2.KeyboardEvent 接口概述
KeyboardEvent接口用来描述用户与键盘的互动。这个接口继承了Event接口，并且定义了自己的实例属性和实例方法。
除了Event接口提供的属性，还可以配置以下字段，它们都是可选。
key：字符串，当前按下的键，默认为空字符串。code：字符串，表示当前按下的键的字符串形式，默认为空字符串。location：整数，当前按下的键的位置，默认为0。ctrlKey：布尔值，是否按下 Ctrl 键，默认为false。shiftKey：布尔值，是否按下 Shift 键，默认为false。altKey：布尔值，是否按下 Alt 键，默认为false。metaKey：布尔值，是否按下 Meta 键，默认为false。repeat：布尔值，是否重复按键，默认为false。
3.KeyboardEvent 的实例属性
/*
* 键盘事件：
* onkeydown
* - 按键被按下
* - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
* - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
* 这种设计是为了防止误操作的发生。
* onkeyup
* - 按键被松开
*
* 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
*/
3.1 KeyboardEvent.altKey，KeyboardEvent.ctrlKey，KeyboardEvent.metaKey，KeyboardEvent.shiftKey
以下属性都是只读属性，返回一个布尔值，表示是否按下对应的键。
KeyboardEvent.altKey：是否按下 Alt 键KeyboardEvent.ctrlKey：是否按下 Ctrl 键KeyboardEvent.metaKey：是否按下 meta 键（Mac 系统是一个四瓣的小花，Windows 系统是 windows 键）KeyboardEvent.shiftKey：是否按下 Shift 键
下面是一个示例。
function showChar(e) {
console.log('ALT: ' + e.altKey);
console.log('CTRL: ' + e.ctrlKey);
console.log('Meta: ' + e.metaKey);
console.log('Shift: ' + e.shiftKey);
}
document.body.addEventListener('keydown', showChar, false);
3.2 KeyboardEvent.charCode和KeyboardEvent.keyCode属性
e.charCode 属性通常用于 onkeypress 事件中，表示用户输入的字符的 “字符码”。
e.keyCode 属性通常用于 onkeydown 事件和 onkeyup 中，表示用户按下的按键的 “键码”。
3.2.1 charCode字符码
| 字符 | 字符码 |
|---|---|
0 ~ 9 | 48 ~ 57 |
A ~ Z | 65 ~ 90 |
a ~ z | 97 ~ 122 |
3.2.2 keyCode键码
| 按键 | 键码 |
|---|---|
0 ~ 9 | 48 ~ 57（同 charCode 键码完全相同） |
A ~ Z a ~ z | 65 ~ 90（字母不分大小写） |
方向键 ← ↑ → ↓ | 37、38、39、40 |
退格键 Backspace | 8 |
Tab | 9 |
回车键 enter | 13 |
Shift | 16 |
Ctrl | 17 |
Alt | 18 |
大小键 CapsLK | 20 |
Esc | 27 |
空格键 space | 32 |
删除键 Delete | 46 |
开始键 Start | 91 |
F1 ~ F12 | 112 ~ 123 |
以上只是部分！
3.2.3 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="field1">
<h1 id="info1"></h1>
<input type="text" id="field2">
<h1 id="info2"></h1>
<script>
var oField1 = document.getElementById('field1');
var oInfo1 = document.getElementById('info1');
var oField2 = document.getElementById('field2');
var oInfo2 = document.getElementById('info2');
oField1.onkeypress = function (e) {
oInfo1.innerText = '你输入的字符的字符码是' + e.charCode;
};
oField2.onkeydown = function (e) {
oInfo2.innerText = '你按下的按键的键码是' + e.keyCode;
};
</script>
</body>
</html>
【小案例 - 盒子移动】
制作一个特效：按方向键可以控制页面上的盒子移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
background-color: orange;
}
#info {
position: fixed;
}
</style>
</head>
<body>
<div id="box"></div>
<h1 id="info"></h1>
<script>
var oBox = document.getElementById('box');
var oInfo = document.getElementById('info');
// 全局变量 t、l，分别表示盒子的 top 属性值和 left 属性值
var t = 200;
var l = 200;
// 监听 document 对象的键盘按下事件监听，表示当用户在整个网页上按下按键的时候
document.onkeydown = function (e) {
oInfo.innerText = '你按下的按键的键码是' + e.keyCode;
switch (e.keyCode) {
case 37:
l -= 3;
break;
case 38:
t -= 3;
break;
case 39:
l += 3;
break;
case 40:
t += 3;
break;
}
// 更改样式
oBox.style.left = l + 'px';
oBox.style.top = t + 'px';
};
</script>
</body>
</html>
3.3 KeyboardEvent.key
key 用户按下的键盘键的值 现在不提倡使用
keyCode
KeyboardEvent.key属性返回一个字符串，表示按下的键名。该属性只读。
如果按下的键代表可打印字符，则返回这个字符，比如数字、字母。
如果按下的键代表不可打印的特殊字符，则返回预定义的键值，比如 Backspace，Tab，Enter，Shift，Control，Alt，CapsLock，Esc，Spacebar，PageUp，PageDown，End，Home，Left，Right，Up，Down，PrintScreen，Insert，Del，Win，F1～F12，NumLock，Scroll 等。
如果同时按下一个控制键和一个符号键，则返回符号键的键名。比如，按下 Ctrl + a，则返回a；按下 Shift + a，则返回大写的A。
如果无法识别键名，返回字符串Unidentified。
