键盘按键事件

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <style>
    #box1{       width: 100px;       height: 100px;       background-color: red;       position: fixed;       top: 50px;      }
  
       </style>
  <script>
    window.onload = function(){             /**          *  使 div 可以根据不同的方向键 向不同的方向移动           *  按左键 div 向左移          *  按右键 div           *   ...          * */          var box1 = document.getElementById("box1");  
         document.onkeydown = function(event){             event = event || window.event;
            // 定义一个 变量 来表示 移动的速度             var speed = 10;
            // 当用户按了 ctrl 以后, 速度加快             if(event.ctrlKey){               speed = 500;             }

            /**              *  37 左              *  38 上              *  39 右              *  40 下             */            switch (event.keyCode) {              case 37:               //  alert("向左"); // left 值减小                box1.style.left = box1.offsetLeft - speed + 'px'                break;              case 39:               //  alert("向右");                box1.style.left = box1.offsetLeft + speed + 'px'                break;                 case 38:               //  alert("向上");                box1.style.top = box1.offsetTop - speed + 'px'                break;                case 40:               //  alert("向下");               box1.style.top = box1.offsetTop + speed + 'px'                break;                default:                break;            }            if(event.key){
           }
         }                    /**            * 键盘事件            * onkeydown            *   按键被按下             *      对于onkeydown 来说 如果一直按着 某个按键不松手 则事件会一直触发            *      当onkeydown 连续触发时, 第一次和第二次之间会间隔稍微长一点,其他的会非常的快            *         这种设计 是为了 防止误操作的发生            * onkeyup              *   按键被松开            *             * 键盘事件一般 都会绑定给一些可以获取到焦点的对象 或者 document           */   
          // document.onkeydown = function(event){           //   event = event || window.event;
            /**              *  可以通过 keyCode 来获取按键的编码              *  通过它 可以判断哪个按钮被按下了              *  除了 keyCode 事件对象中还提供了几个属性              *  altKey               *  ctrlKey              *  shiftKey              *    这三个用来判断 alt ctrl 和 shift 是否被按下              *    如果按下则返回true,否则返回 false             */
            // 判读一个 y 是否被按下             // if(event.keyCode === 89){             //   console.log('y被按下了');             // }
            // 判断 y 和 ctrl 是否被同时按下           //   if(event.keyCode === 89 && event.ctrlKey){           //     console.log('ctrl+y都被按下了');           //   }
          //   // console.log(event.keyCode);           // }
          // document.onkeyup = function(){           //   console.log('按键松开了');           // }

          // 获取input           // var input = document.getElementsByTagName("input")[0];           // input.onkeydown = function(event){            //   event = event || window.event;            //   // 数字 48-57  禁止输入数字           //   if(event.keyCode >= 48 && event.keyCode <=57){           //     // 取消默认行为           //     return false;            //   }                          // 只能输入数字             // if(event.keyCode >= 48 && event.keyCode <=57){              // }else{             //   // 取消默认行为             //   return false;              // }                        //   console.log(event.keyCode);            // }            }   
  </script> </head> <body >       <div id="box1"></div>
  <input type="text">     </body> </html>
上一篇:回车键提交事件


下一篇:div跟随键盘移动