今天的码农女孩做了关于键盘事件的笔记和练习

最新推荐文章于 2024-09-03 17:02:58 发布

丁丁丁dingdingding

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量510

点赞数

分类专栏：小练习笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_64444606/article/details/123957229

版权

笔记同时被 2 个专栏收录

91 篇文章 0 订阅

订阅专栏

小练习

47 篇文章 0 订阅

订阅专栏

键盘事件

onkeydown 按键按下,如果一直按着某个按键不松手，则事件会一直触发，如果连续触发时，第一次和第二次直接会间隔稍微长一点，其他的会非常快，这种设计是为了防止误操作发生

onkeyup 按键松开,键盘事件一般都会绑定给一些可以获取焦点的对象或者是document

可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下

除了keyCode，事件对象中还提供了几个属性：

altKey ctrlKey shiftKey这三个用来判断alt ctrl shift是否被按下，按下返回true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            document.onkeydown=function(event){
                event=event || window.event;
                //判断y键是否被按下，先获取y的编码89
                if(event.keyCode===89){
                    console.log("y被按下");
                }
                //判断y和ctrl是否同时被按下
                if(event.keyCode===89 && event.ctrlKey){
                    console.log("ctrl和y同时被按下");
                }
            }
            document.onkeyup=function(){
                console.log("松开")
            }
            //获取input
            var input=document.getElementsByTagName("input")[0];
            input.onkeydown=function(event){
                console.log("按键被按下");
                //在文本框不能输入数字
                event=event || window.event;
                //数字的keyCode是48-57
                if(event.keyCode>=48 && event.keyCode<=57){
                    //在文本框中输入内容，属于onkeydown的默认行为
                    //如果在onkeydown取消了默认行为，则输入的内容，不会出现在文本框中
                    return false;
                }
            }
        }
    </script>
</head>
<body>
    <input type="text">
</body>
</html>

练习：使div可以根据不同的方向键向不同的方向移动，左键向左移右键向右移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        //使div可以根据不同的方向键向不同的方向移动，左键向左移右键向右移
        window.onload=function(){
            var box1=document.getElementById("box1");
            document.onkeydown=function(event){
                event=event || window.event;
                //定义一个变量表示移动的速度
                var speed=10;
                //当用户按了ctrl以后速度加快
                if(event.ctrlKey){
                    speed=50;
                }
                //左上右下按键keyCode是37-40
                switch(event.keyCode){
                    case 37:box1.style.left=box1.offsetLeft-speed+"px";break;
                    case 39:box1.style.left=box1.offsetLeft+speed+"px";break;
                    case 38:box1.style.top=box1.offsetTop-speed+"px";break;
                    case 40:box1.style.top=box1.offsetTop+speed+"px";break;
                }
            }
        }
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

丁丁丁dingdingding

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
今天的码农女孩做了关于键盘事件的笔记和练习

键盘事件onkeydown 按键按下,如果一直按着某个按键不松手，则事件会一直触发，如果连续触发时，第一次和第二次直接会间隔稍微长一点，其他的会非常快，这种设计是为了防止误操作发生onkeyup 按键松开,键盘事件一般都会绑定给一些可以获取焦点的对象或者是document可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下除了keyCode，事件对象中还提供了几个属性：altKey ctrlKey shiftKey这三个用来判断alt ctrl shift是否被按下，按.
复制链接

扫一扫

专栏目录