一帧数据 WEB视频自适应 线程 摩尔投票法 html https powershell checkbox drupal controller vue配置 spark项目 python数据挖掘实战pdf oracle添加索引 webform开发教程 cmd清空命令 python环境 mysql 连接 mysql入门 destoon模板 python集合操作 python获取日期 python自学教程 python中pop函数 java基本语法 java接口文档 java的基本类型 java开发者 学习java基础 java时间戳转换日期格式 java正则匹配数字 javaenum java创建对象 微信小程序提示框 地球末日攻略 getelementbyid 英雄联盟崩溃 cad视口旋转 cmd命令数字雨 男网红头像
当前位置: 首页 > 学习教程  > 编程语言

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

2021/2/13 17:27:30 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

实现的主要功能:判断按下了哪个按键,可以实现部分内容输入文本框不显示通过判断按下键来条件输出return false; 所有的注释都在html中,解释的很详细,我就不再一一解释 注:这里我用的js是ES6 定义变量时采用…

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

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


本文链接: http://www.dtmao.cc/news_show_700156.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?