键盘事件


<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>

你可能感兴趣的:(miaov,笔记)