JavaScript(十六)——HTML DOM对象知识点(二)——键盘事件

深碍√TFBOYSˉ_ 2023-02-16 12:28 19阅读 0赞

# 键盘事件基础 #

>     * onkeydown        按键被按下
>     *          如果一直按一个按键不松手则事件连续触发
>     *          onkeydown连续触发时，第一次和第二次之间间隔长一点
>     *              防止误操作发生
>     *
>     * onkeyup          按键被松开
>     *
>     *
>     * 键盘事件一般会绑定到 能获取到焦点的按键   如,input  或document
> 
> Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which，目前用keyCode也能用，不报错。

简单操作：设置文本框不能输入数字

按下数字0-9 keyCode 返回 48-59

思路：

1.    js获取input
2.    input绑定onkeydown事件

var input = document.getElementsByTagName("input");
    //文本框中不能输入数字
    //0-9      48-57
    input.onkeydown = function (event) {
        event = event || window.event;
        if (event.keyCode >=48 && event.keyCode<=57){
            return false;
        }
    }

# 进阶小练习 #

## 上下左右控制div移动 ##

思路：

1. 按下键子div移动 松开键子div停止。按键在document中执行的    所以用document绑定  onkeydown  onkeyup事件

2. 获取div 和 按下键的键子

3.改变div的left和top   speed

记得div设置绝对定位

代码如下

/**
     * 使div根据方向键移动
     *
     * 左37上 38右 39下 40
     * */
    var box1234 = document.getElementById("box1234")
    
    var dir = 0;
    var  speed = 20;
    setInterval(function () {
    
    
        //修改dir 影响移动方向
        switch (dir) {
            case 37:
                // alert("z")
                box1234.style.left = box1234.offsetLeft - speed+"px";
                console.log("123")
                break;
            case 39:
                // alert("y")
                box1234.style.left = box1234.offsetLeft + speed+"px";
                break;
            case 38:
                // alert("s")
                box1234.style.top = box1234.offsetTop - speed +"px";
                break;
            case 40:
                // alert("x")
                box1234.style.top = box1234.offsetTop + speed +"px";
                break;
        }
    },30);
    
    document.onkeydown= function (event) {
        event = event || window.event;
    
        if (event.ctrlKey){
            speed = 50;
        }else {
            speed = 20;
        }
        dir = event.keyCode;
    
    }
    document.onkeyup = function () {
        dir = 0;
    }