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

键盘事件基础

* 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;
}