js常用的键盘事件有哪些(用法示例)_键码keyCode对照表

2023年6月1日上午10:30 • JavaScript

下面就针对题目中提到的问题进行详细的讲解。

1. JS常用的键盘事件有哪些

在 JS 中，常用的键盘事件包括：keydown、keypress 和 keyup。它们分别表示键盘按下、按住不放和松开三个状态。其中，keydown 和 keyup 的响应速度比较快，但是无法获取到按住不放的过程；keypress 响应相对较慢，但能够获取按住不放的过程。一般情况下，我们会根据具体的需求来选择使用哪个事件。

2. keyCode 对照表

keyCode 是键盘事件对象中的一个属性，它用于获取按下的键的 ASCII 码值，从而实现不同的交互效果。下面是 keyCode 值与相应按键的对照表：

`keyCode`	键名
8	Backspace
9	Tab
13	Enter
16	Shift
17	Ctrl
18	Alt
19	Pause/Break
20	Caps Lock
27	Esc
32	Spacebar
33	Page Up
34	Page Down
35	End
36	Home
37	Left
38	Up
39	Right
40	Down
45	Insert
46	Delete
91	Win
92	Win
93	Menu
96	0
97–122	a–z
48–57	0–9
112–123	F1–F12

3. 用法示例

示例一：判断按下的键是否为回车键

下面是一个示例，用于判断按下的键是否为回车键：

document.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if (e && e.keyCode === 13) {
        // 处理回车键按下的逻辑
        console.log("按下的是回车键");
    }
};

在上面的代码中，我们通过 document.onkeydown 绑定了一个键盘按下事件。当用户按下任意键时，会触发这个事件。然后我们通过获取事件对象 event，再通过 keyCode 属性获取按下的键的值，如果值为 13，则表示按下的是回车键，接着进行相应的处理。

示例二：在输入框中实时显示按键状态

下面是一个示例，用于在输入框中实时显示按键状态：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>

<body>
    <input type="text" id="text-input">
    <p id="state"></p>
    <script>
        var input = document.getElementById("text-input");
        var state = document.getElementById("state");

        input.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e) {
                state.innerHTML = "按键状态：<br>"
                    + "Alt： " + e.altKey + "<br>"
                    + "Ctrl： " + e.ctrlKey + "<br>"
                    + "Shift： " + e.shiftKey;
            }
        };
    </script>
</body>

</html>

在上面的代码中，我们创建了一个输入框和一个状态显示框。然后通过 input.onkeydown 绑定了一个键盘按下事件。当用户按下任意键时，会触发这个事件。然后我们通过获取事件对象 event，并通过 altKey、ctrlKey 和 shiftKey 属性获取键盘按键的状态，最后将状态显示在状态显示框中。这样就能实现在输入框中实时显示按键状态的功能了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js常用的键盘事件有哪些(用法示例)_键码keyCode对照表 - Python技术站