js 键盘事件

onkeydown:当键盘按键按下的时候触发

onkeyup:当键盘按键抬起的时候触发

event.keyCode:数字类型键盘按键的值键值

ctrlKey,shiftKey,altKey 布尔值

当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true,否则返回false

当鼠标按住ctrl键并点击页面，返回true，若只点击页面，则返回false.

留言本，回车输入效果

发现输入一个字幕就会添加一个li

<!DOCTYPE html>
<html>
   <head>
       <meta charset="{CHARSET}">
       <title></title>
       <script type="text/javascript">
           window.onload = function(){
               var oText = document.getElementById('text1');
               var oUl = document.getElementById('ul1');

               oText.onkeyup = function(){
                   var ev = ev || event;

                   if(this.value != ''){
                       if(ev.keyCode == 13 ){
                           var oLi = document.createElement('li');
                           oLi.innerHTML = this.value;
                           if(oUl.children[0]){
                               oUl.insertBefore(oLi,oUl.children[0]);
                           }else{
                               oUl.appendChild(oLi);
                           }
                       }
                   }
               }
           }
       </script>
   </head>
   <body>
       <input type="text" id="text1"/>
       <ul id="ul1"></ul>
   </body>
</html>

-------------------------键盘控制divyi---------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="{CHARSET}">
       <title></title>
       <style>
           #div1{width: 100px ;height: 100px;background: blue;position: absolute; }
       </style>
       <script type="text/javascript">
           window.onload = function(){
               var oDiv = document.getElementById('div1');
               //不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能接收键盘事件
               //onkeydown:如果按下不抬起，那么会连续触发
               document.onkeydown = function(ev){
                   var ev = ev || event;
                   switch(ev.keyCode){
                       case 37:
                       oDiv.style.left = oDiv.offsetLeft -10 +'px';
                       break;
                       case 38:
                       oDiv.style.top = oDiv.offsetTop -10 +'px';
                       break;
                       case 39:
                       oDiv.style.left = oDiv.offsetLeft +10 +'px';
                       break;
                       case 40:
                       oDiv.style.top = oDiv.offsetTop +10 +'px';
                       break;
                   }
               }
           }
       </script>
   </head>
   <body>
       <div id="div1"></div>
   </body>
</html>

思考：如果打游戏的时候，用户连续按某一键，电脑会判断用户是否是要连续输入某一值，会有一小段时间间隔，游戏会因这一小段延迟，over掉，所以怎么解决呢？

注意：

例子:按下shift键实现全选

猜你喜欢