前端 JavaScript -- 键盘按下松开事件

最新推荐文章于 2022-04-17 20:17:01 发布

小刘爱搬砖

最新推荐文章于 2022-04-17 20:17:01 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： js html

本文链接：https://blog.csdn.net/chang100111/article/details/113802185

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

实现的主要功能：判断按下了哪个按键，可以实现部分内容输入文本框不显示通过判断按下键来条件输出return false；

所有的注释都在html中，解释的很详细，我就不再一一解释
注：这里我用的js是ES6 定义变量时采用let ES6以下替换为var即可

判断键盘按下的是哪个键

<script>
    window.onload = function () {
        /**
         * 键盘事件不能绑定div，一般绑定给容易获取焦点的对象 eg：input
         * onkeydown
         *      - 按下按键,如果一直按着会一直触发
         *      - 连续触发时，第一次和第二次间隔稍微长，以后就非常快
         * onkeyup  松开按键，只会触发一次
         */
        let test = document.getElementById("test");
        document.onkeydown = function (event) {
            event = event || window.event;
            /**
             * 通过keyCode属性返回的ASCII编码来判断按下的按键，注意区分大小写
             * 事件单独提供了ctrlkey shiftkey altkey 用来判断ctrl、shift、alt是否被按下，
             * 被按下时返回true
             */
            if (event.keyCode ===  89 && event.altKey){
                console.log("我按下了y和 Alt")
            }
            //当文本框返回一个return false 取消默认行为时，文本框不再显示输入内容
             /* *
             *test.onkeydown = function () {
             *  return false;
             * };
             */
        };
    };
</script>
<body>
    <input type="text" id="test">
</body>

实现元素的移动，通过方向键进行控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素移动</title>
    <style>

        #box1{
           width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        /**
         *  css一定要开启position: absolute;
         */
        window.onload = function () {
            /**
             * 通过方向键控制元素移动方向，按下ctrl实现加速
             * 类似于贪吃蛇功能
             */
            let box1 = document.getElementById("box1");
            //移动速度
            let speed = 10;
            //设置移动的方向
            let dir = 0;
            //开启一个定时器，控制div移动
            setInterval(function () {

                /**
                 * 37 左
                 * 38 上
                 * 39 右
                 * 40 下
                 */
                switch (dir) {
                    case 37:
                        box1.style.left = box1.offsetLeft - speed +"px";
                        break;
                    case 38:
                        box1.style.top = box1.offsetTop - speed +"px";
                        break;
                    case 39:
                        box1.style.left = box1.offsetLeft + speed +"px";
                        break;
                    case 40:
                        box1.style.top = box1.offsetTop + speed +"px";
                        break;
                }
            },50);

            //当键盘按下时改变元素移动方向
            window.onkeydown = function (event) {
            	// 解决兼容性问题，兼容火狐 解决火狐找不到event问题
                event = event||window.event;
                //用户按下ctrl速度变快
                if (event.ctrlKey){
                    speed = 50;
                }else
                {
                    speed = 10;
                }
                //现在官方有了更好的方法替代keyCode 但keyCode仍然可用
                dir = event.keyCode;
            };
            //当键盘松开
            window.onkeyup = function () {
                dir = 0;
            };
        };
    </script>
</head>
<body>
    <div id="box1" ></div>
</body>
</html>

正在学习中，不足之处，感谢指正

小刘爱搬砖

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端 JavaScript -- 键盘按下松开事件

实现的主要功能：判断按下了哪个按键，可以实现部分内容输入文本框不显示通过判断按下键来条件输出return false；所有的注释都在html中，解释的很详细，我就不再一一解释注：这里我用的js是ES6 定义变量时采用let ES6以下替换为var即可判断键盘按下的是哪个键<script> window.onload = function () { /** * 键盘事件不能绑定div，一般绑定给容易获取焦点的对象 eg：input
复制链接

扫一扫