【键盘事件】

键盘事件的种类

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。

  • keydown：按下键盘时触发。
  • keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
  • keyup：松开键盘时触发该事件。

如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下。

  1. keydown
  2. keypress
  3. keydown
  4. keypress
  5. …（重复以上过程）
  6. keyup

KeyboardEvent 接口概述

KeyboardEvent接口用来描述用户与键盘的互动。这个接口继承了Event接口，并且定义了自己的实例属性和实例方法。

除了Event接口提供的属性，还可以配置以下字段，它们都是可选。

  • key：字符串，当前按下的键，默认为空字符串。
  • code：字符串，表示当前按下的键的字符串形式，默认为空字符串。
  • location：整数，当前按下的键的位置，默认为0。
  • ctrlKey：布尔值，是否按下 Ctrl 键，默认为false。
  • shiftKey：布尔值，是否按下 Shift 键，默认为false。
  • altKey：布尔值，是否按下 Alt 键，默认为false。
  • metaKey：布尔值，是否按下 Meta 键，默认为false。
  • repeat：布尔值，是否重复按键，默认为false。

KeyboardEvent 的实例属性

1
2
3
4
5
6
7
8
9
10
11
12
/*
 * 键盘事件：
 * 	onkeydown
 * 		- 按键被按下
 * 		- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
 * 		- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
 * 			这种设计是为了防止误操作的发生。
 * 	onkeyup
 * 		- 按键被松开
 * 
 *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
 */

KeyboardEvent.altKey，KeyboardEvent.ctrlKey，KeyboardEvent.metaKey，KeyboardEvent.shiftKey

以下属性都是只读属性，返回一个布尔值，表示是否按下对应的键。

  • KeyboardEvent.altKey：是否按下 Alt 键
  • KeyboardEvent.ctrlKey：是否按下 Ctrl 键
  • KeyboardEvent.metaKey：是否按下 meta 键（Mac 系统是一个四瓣的小花，Windows 系统是 windows 键）
  • KeyboardEvent.shiftKey：是否按下 Shift 键

下面是一个示例。

1
2
3
4
5
6
7
8
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);

KeyboardEvent.charCode和KeyboardEvent.keyCode属性

e.charCode 属性通常用于 onkeypress 事件中，表示用户输入的字符的 “字符码”。

e.keyCode 属性通常用于 onkeydown 事件和 onkeyup 中，表示用户按下的按键的 “键码”。

charCode字符码

字符 字符码
0 ~ 9 48 ~ 57
A ~ Z 65 ~ 90
a ~ z 97 ~ 122

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

以上只是部分！

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>

style=“zoom:50%;” />

【小案例 - 盒子移动】

制作一个特效：按方向键可以控制页面上的盒子移动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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>

style=“zoom:50%;” />

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。

事件对象与鼠标事件 进度事件和表单事件