js：两种方法实现键盘按键控制

第一步：先获取按键的键码（按下哪个键）使用DOM（文档对象模型）或者jQuery（js常用框架）实现完整代码（之后只给js部分）：<!DOCTYPE html><html><head><title>键盘事件</title></head><body style="text-align: center;"><h1

真实lie

4883人浏览 · 2022-04-20 23:20:17

真实lie · 2022-04-20 23:20:17 发布

第一步：先获取按键的键码（按下哪个键）

使用DOM（文档对象模型）或者jQuery（js常用框架）实现

完整代码（之后只给js部分）：

<!DOCTYPE html>
<html>
    <head>
        <title>键盘事件</title>
    </head>
    <body style="text-align: center;">
        <h1>键盘事件</h1>
        <p id="demo1"></p>
        <p id="demo2"></p>
    </body>
        <script type="text/javascript" src="jquery-3.6.0.js"></script>
        <script type="text/javascript">
            //DOM实现
            /*事件监听函数说明
            addaddEventListener(even，function(),true/false)
            第一个参数是事件，例如"click",引号是必须的，不要用on开头，例如"onclick"。
            第二个参数是函数，可以传参，例如function(even){代码段}。
            第三个参数可选，使用布尔值，决定事件监听顺序（冒泡或者捕获），新手（包括本人）一般不使用
            事件冒泡:事件会从最内层的元素开始发生,一直向上传播,直到document对象；
            事件捕获:与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。
            */
            document.addEventListener("keydown",function(even){
                document.getElementById("demo1").textContent ="按下的键码是：" + even.keyCode;
            });
            //jQuery实现
            /*jQuery方法说明
            $(element)选中元素，直接选中或者通过id，类等方法选中
            .method()执行方法，具体方法请查询：
            https://www.w3school.com.cn/jquery/jquery_reference.asp
            */
            $(document).keydown(function(even){
                $("#demo2").text("按下的键码是：" + even.keyCode);
            })
            /*特别说明：
            document和jquery选中元素后改变文本方式不同： = 和 ()
            个人理解是:textContent是元素的一个属性，而text是jquery的一个方法（jquery本质是一个js文件，是一个方便的框架）
            */
        </script>
</html>

第二步：根据不同的键码实现不同的功能

使用if或者switch判断执行函数

$(document).keydown(function(even){
                //$("#demo2").text("按下的键码是：" + even.keyCode);
                switch(even.keyCode){
                    case 37: alert("左移");break;
                    case 38: alert("上移");break;
                    case 39: alert("右移");break;
                    case 40: alert("下移");break;
                }
            })

天启AI社区

GitCode 天启AI是一款由 GitCode 团队打造的智能助手，基于先进的LLM（大语言模型）与多智能体 Agent 技术构建，致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话，还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力，真正做到“一句话，让 Al帮你完成复杂任务”。

更多推荐