键盘事件

最新推荐文章于 2022-07-11 15:24:10 发布

HaahLeel

最新推荐文章于 2022-07-11 15:24:10 发布

阅读量360

点赞数

分类专栏： miaov 笔记

本文链接：https://blog.csdn.net/NewStart_lh/article/details/46958041

版权

miaov 笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script >
        window.onload = function(){
            /*
            * onkeydown : 键盘按键按下时触发的事件
            * onkeyup ： 键盘按键抬起时触发的事件
            *
            * event.keyCode : 数字类型 键盘按键的值 键值
            * ctrlKey,shiftKey,altKey 布尔值
            * 当一个事件发生的时候，如果ctrl || shift || alt 是按下状态，返回true,否则返回false
            *
            *不是所有的元素都能够接收键盘事件，能够响应用户输入的元素（能够接收焦点的元素）就能接收键盘事件
            * */

            //ctrl+enter键发送消息

            var oText = document.getElementById("text1");
            var oUl = document.getElementById("ul1");
            var oDiv1 = document.getElementById("div1");
            oText.onkeyup = function(ev){
                var ev = ev || event;
                if(this.value != ''){
                    if(ev.keyCode == 13 && ev.ctrlKey){
                        var oLi = document.createElement("li");
                        oLi.innerHTML = this.value;
                        this.value = '';
                        if(oUl.children[0]){
                            oUl.insertBefore(oLi, oUl.children[0])
                        }else{
                            oUl.appendChild(oLi)
                        }
                    }
                }
            }


            //通过按键控制div方向的移动
            document.onkeydown = function(ev){
                var ev = ev || event;
                switch (ev.keyCode){
                    case 37:
                        oDiv1.style.left = oDiv1.offsetLeft - 10 +"px";
                        break;
                    case 38:
                        oDiv1.style.top = oDiv1.offsetTop - 10 +"px";
                        break;
                    case 39:
                        oDiv1.style.left = oDiv1.offsetLeft + 10 +"px";
                        break;
                    case 40:
                        oDiv1.style.top = oDiv1.offsetTop + 10 +"px";
                        break;
                }
            }

        }
    </script>
</head>
<body>
    <input type="text" id="text1"/>
    <ul id="ul1"></ul>

    <div id="div1" style="width: 100px;height:100px;background: green;position: absolute"></div>
</body>
</html>

HaahLeel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
键盘事件

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script > window.onload = function(){ /* * onkeydown : 键盘按键按下时触发的事件
复制链接

扫一扫

专栏目录