鍵盤事件

//    onkeydown鍵盤按下的時候觸發(fā)
//    onkeyup鍵盤抬起的時候觸發(fā)
//    ev.keyCode:數(shù)字類型,鍵盤按鍵的值  鍵值
//    ctrlKey altKey shiftKey 布爾類型
//    當一件事情發(fā)生的時候,如果是ctrl || alt || shift是按下的狀態(tài),返回true,否則返回false


//document.onkeydown= function (ev) {
//      var ev=ev||event;
//      alert(ev.keyCode);
//};

    document.onclick=function(ev){
        var ev=ev||event;
        alert(ev.shiftKey);
    }

發(fā)送留言

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload= function () {
            var otext=document.getElementById('text1');
            var ul1=document.getElementById('ul1');
            otext.onkeyup= function (ev) {
                var ev=ev||event;
                if(this.value!=''){
                    if(ev.keyCode==13 && ev.ctrlKey){
                        var oli=document.createElement('li');
                        oli.innerHTML=otext.value;
                        if(ul1.children[0]){
                            ul1.insertBefore(oli,ul1.children[0]);
                        }else{
                            ul1.appendChild(oli);
                        }
                    }
                }
            };
        };
    </script>
</head>
<body>
<input type="text" id="text1"/>
<ul id="ul1" id="'ul1"></ul>
</body>
</html>

鍵盤控制div移動

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script>
        window.onload= function () {
              var odiv=document.getElementById('div1');
              document.onkeydown= function (ev) {
                   var ev=ev||event;
                   switch (ev.keyCode){
                       case 37:
                           odiv.style.left=parseInt(getByClass(odiv,'left'))-10+'px';
                           break;
                       case 38:
                           odiv.style.top=parseInt(getByClass(odiv,'top'))-10+'px';
                           break;
                       case 39:
                           odiv.style.left=parseInt(getByClass(odiv,'left'))+10+'px';
                           break;
                       case 40:
                           odiv.style.top=parseInt(getByClass(odiv,'top'))+10+'px';
                           break;
                   }
              };
            function getByClass(obj,attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }else{
                    return getComputedStyle(obj)[attr];
                }
            }
        };
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容