JavaScript 键盘事件

JavaScript 键盘事件简介

键盘事件一般在具有焦点的元素（比如 input、textarea 等）上触发，不过我们也可以为 window 或 document 对象绑定全局的键盘事件。

在 JavaScript 中，键盘事件主要有 2 种，如下表所示。

JavaScript 键盘事件
事件	说明	触发时机
keydown	按键按下	按键按下一瞬间触发，如果按键持续按下，那么将会连续触发
keyup	按键松开	按键松开一瞬间触发

对于键盘来说，都是先有 “按下”，才有 “松开”，也就是 keydown 发生在 keyup 之前。

注意: 在现代 Web 开发中，keypress 事件已经被弃用，现在推荐使用 keydown 和 keyup 代替它。

JavaScript 键盘事件示例

接下来，我们通过几个简单的例子来讲解 JavaScript 键盘事件是如何使用的。

示例 1：统计输入字符的长度

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input id="txt" type="text">
    <div>字符串长度：<span id="num">0</span></div>
    <script>
        const oTxt = document.getElementById("txt");
        const oNum = document.getElementById("num");

        oTxt.addEventListener("keyup", function() {
            const str = oTxt.value;
            oNum.textContent = str.length;
        });
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript keyup 事件：统计输入字符的长度

分析：

这个例子实现的效果是：当用户输入字符串后，会自动计算字符串的长度。

实现原理很简单，每输入一个字符，我们都需要敲击一下键盘。然后每次输完该字符（也就是松开键盘时），都会触发一次 keyup 事件，此时我们计算字符串的长度就可以了。

可能有小伙伴会问：“为什么这个例子不使用 keydown 事件，而是使用 keyup 事件呢？” 这是因为 keydown 事件发生时，字符还没有真正输入到输入框中。此时获取 value 还是输入之前的内容，导致计算的长度少 1 位。而 keyup 发生时，字符已经输入完成了，此时获取的长度才是正确的。

示例 2：验证输入是否正确

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .correct {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
</head>
<body>
    <p>
        <label for="txt">手机号码：</label>
        <input id="txt" type="tel" placeholder="请输入 11 位手机号"> 
    </p>
    <p id="error"></p>
    <script>
        const oTxt = document.getElementById("txt");
        const oError = document.getElementById("error");

        // 定义正则表达式
        const myregex = /^1[3-9]\d{9}$/; 

        oTxt.addEventListener("keyup", function() {
            const inputValue = oTxt.value.trim(); // 获取并去除输入值两端的空格

            // 如果输入框为空，不进行验证，清空提示
            if (inputValue === "") {
                oError.textContent = "请输入手机号码";
                oError.className = "error";
                return;
            }

            // 判断是否符合手机号码格式
            if (myregex.test(inputValue)) {
                oError.textContent = "手机号码格式正确！";
                oError.className = "correct";   // 使用绿色样式
            } else {
                oError.textContent = "手机号码格式错误！必须是 11 位，并以 1[3-9] 开头";
                oError.className = "error";    // 使用红色样式
            }
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图 2 所示。当我们输入内容时，页面效果如下图 2 所示。

JavaScript keyup 事件：手机号码校验输入框的默认提示

JavaScript keyup 事件：实时校验手机号码格式错误的提示

分析：

几乎每一个网站的注册功能都会涉及表单验证，例如判断用户名是否已注册、密码长度是否满足、邮箱格式是否正确等。而表单验证，就肯定离不开正则表达式。

键盘事件一般有两个用途：表单操作和动画控制。对于动画控制，常见于游戏开发中，例如在《英雄联盟》中控制人物行走或释放技能，就是通过键盘来控制的。

英雄联盟人物列表：说明键盘事件可用于游戏动画控制