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

2021-02-13 17:29:58 阅读：590 来源： 互联网

标签：function -- box1 JavaScript window 按下 speed event

实现的主要功能：判断按下了哪个按键，可以实现部分内容输入文本框不显示通过判断按下键来条件输出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>

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

标签：function,--,box1,JavaScript,window,按下,speed,event
来源： https://blog.csdn.net/chang100111/article/details/113802185

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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