JS键盘事件

在JavaScript中，当用户操作键盘时，会触发键盘事件，通过键盘触发事件，类似用户的行为：当获取用户正按下建码时，可以使用keydown、keypress和keyup事件获取这些信息。其中keydown和keypress事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用keypress事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。当键盘按下判断当前

Jackson-_7

3362人浏览 · 2022-06-28 23:19:22

Jackson-_7 · 2022-06-28 23:19:22 发布

前言

键盘事件

键盘事件定义的属性:

一、键盘按键事件案例

二、div方向移动案例

三、拓展知识：

前言

在JavaScript中，当用户操作键盘时，会触发键盘事件，通过键盘触发事件，类似用户的行为：

keydown: 在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Opera浏览器不支持这种连续操作。该事件处理函数返回false时，会取消默认的动作(如输入的键盘字符，在IE和Safari浏览器下还会禁止keypress事件响应).
keypress: 按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回false时，会取消默认的动作(如输入的键盘字符).
keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个连续的响应状态。

当获取用户正按下建码时，可以使用keydown、keypress和keyup事件获取这些信息。其中keydown和keypress事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用keypress事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。

键盘事件

属性	描述
onkeydown	当按下按键时运行脚本。
onkeyup	当松开按键时运行脚本。
onkeypress	当按下并松开按键时运行脚本。

键盘事件定义的属性:

属性	说明
keyCode	该属性包含键盘中对应键位的键值
charCode	该属性包含键盘中对应键位的Unicode编码，仅DOM支持
target	发生事件的节点(包含元素),仅DOM支持
srcElement	发生事件的元素，仅IE支持
shiftKey	是否按下Shift键，如果按下返回true，否则为false
ctrlKey	是否按下Ctrl键，如果按下返回true，否则为false
altKey	是否按下Alt键，如果按下返回true，否则为false
metaKey	是否按下Meta键，如果按下返回true，否则为false，仅DOM支持

一、键盘按键事件案例

当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>案例一</title>
</head>
<body>

<script>
    /* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
    window.onkeydown = function (event) {
        /* 解决兼容性问题 */
        event = event || window.event;

        if (event.keyCode == 65) {
            console.log("true");
        } else {
            console.log("false");
        }
    };
</script>
</body>
</html>

二、div方向移动案例

使div可以根据不同的方向键向不同的方向移动

键位和码值对照表

键位	码值	键位	码值
0~9(数字键)	48~57	A~Z(字母键)	65~90
Backspace(退格键)	8	Tab(制表键)	9
Enter(回车键)	13	Space(空格键)	32
Left arrow(左箭头键)	37	Top arrow(上箭头键)	38
Rigth arrow(右箭头键)	39	Down arrow(下箭头键)	40

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>


<script>
    var box = document.getElementById("box");

    //为document绑定一个按键按下的事件
    document.onkeydown = function (event) {
        event = event || window.event;

        // 定义移动速度
        var speed = 10;

        // 选择移动方向
        switch (event.keyCode) {
            case 37:
                box.style.left = box.offsetLeft - speed + "px";
                break;
            case 39:
                box.style.left = box.offsetLeft + speed + "px";
                break;
            case 38:
                box.style.top = box.offsetTop - speed + "px";
                break;
            case 40:
                box.style.top = box.offsetTop + speed + "px";
                break;
        }
    };
</script>
</body>
</html>