大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > keyCode获取用户按下键盘的哪个按键

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

关键词:keyCode按键  阅读(2333) 赞(19)

[摘要]本文是对keyCode获取用户按下键盘的哪个按键的讲解,对学习JavaScript编程技术有所帮助,与大家分享。

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

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <script>
 /*
 onkeydown : 当键盘按键按下的时候触发
 onkeyup : 当键盘按键抬起的时候触发
 
 event.keyCode : 数字类型 键盘按键的值 键值
     ctrlKey,shiftKey,altKey 布尔值
     当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false
 */
 
 document.onkeydown = function(ev) {
     
     //alert(1);
     var ev = ev || event;
     //alert(ev.keyCode);
     
 }
 
 document.onclick = function(ev) {
     var ev = ev || event;
     
     alert(ev.ctrlKey);
 }
 </script>
 </head>
 
 <body>
 </body>
 </html>

键盘事件实例:

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <script>
 window.onload = function() {
     
     var oText = document.getElementById('text1');
     var oUl = document.getElementById('ul1');
     
     oText.onkeyup = function(ev) {
         
         var ev = ev || event;
         
         //alert(this.value);
         if ( this.value != '' ) {
             
             if (ev.keyCode == 13 && ev.ctrlKey) {
             
                 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>

键盘控制div移动:

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <style>
 #div1 {width: 100px; height: 100px;  background: red; position: absolute;}
 </style>
 <script>
 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>


相关评论