键盘事件 keyCode、ctrlKey等

一、keyCode

      获取用户按下键盘的哪个按键

     例如：查看键盘对应的数字

     代码：

 //获取用户按下键盘的哪个按键
        document.onkeydown = function (ev) {
            var oEvent = ev || event;
            alert(oEvent.keyCode);
        };

   例如：键盘控制div移动

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background: #ccc;
            width:20px;
            height: 20px;
            position: absolute;
        }
    </style>

    <script>
        //鼠标移动所有的div跟着移动
        function getPos(ev){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {x:ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
        }

       document.onmousemove = function (ev) {
           var oEvent = ev || event;
           var aDiv = document.getElementsByTagName('div');
           var pos = getPos(oEvent);

           for(var i=aDiv.length-1;i>0;i--){
               aDiv[i].style.left = aDiv[i-1].offsetLeft+'px';
               aDiv[i].style.top = aDiv[i-1].offsetTop+'px';
           }

           aDiv[0].style.left = pos.x+'px';
           aDiv[0].style.top = pos.y+'px';
       }


    </script>
</head>
<body style="height:2000px;">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

二：其他属性

   ctrlKey、shiftKey、altKey

  例如：提交留言  （ctrl+回车 提交）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            oText1 = document.getElementById('text1');
            oText2 = document.getElementById('text2');
            oText1.onkeydown = function (ev) {
                oEvent = ev || event;
                //control+回车键，发送消息
                if(oEvent.keyCode == 13 && oEvent.ctrlKey){
                    oText2.value +=oText1.value+"\n";
                    oText1.value = '';
                }
            }
        }
    </script>
</head>

<body>
<input id="text1" type="text" /><br />
<textarea name="" id="text2" cols="30" rows="10"></textarea>
</body>
</html>

 

posted on 2017-05-15 10:26  懂你在爱我  阅读(2057)  评论(0)    收藏  举报

导航