标签：style class blog code java http
keyCode
获取用户按下键盘的哪个按键
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 /* 8 onkeydown : 当键盘按键按下的时候触发 9 onkeyup : 当键盘按键抬起的时候触发 10 11 event.keyCode : 数字类型 键盘按键的值 键值 12 ctrlKey,shiftKey,altKey 布尔值 13 当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false 14 */ 15 16 document.onkeydown = function(ev) { 17 18 //alert(1); 19 var ev = ev || event; 20 //alert(ev.keyCode); 21 22 } 23 24 document.onclick = function(ev) { 25 var ev = ev || event; 26 27 alert(ev.ctrlKey); 28 } 29 </script> 30 </head> 31 32 <body> 33 </body> 34 </html>
键盘事件实例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function() { 8 9 var oText = document.getElementById(‘text1‘); 10 var oUl = document.getElementById(‘ul1‘); 11 12 oText.onkeyup = function(ev) { 13 14 var ev = ev || event; 15 16 //alert(this.value); 17 if ( this.value != ‘‘ ) { 18 19 if (ev.keyCode == 13 && ev.ctrlKey) { 20 21 var oLi = document.createElement(‘li‘); 22 oLi.innerHTML = this.value; 23 24 if ( oUl.children[0] ) { 25 oUl.insertBefore( oLi, oUl.children[0] ); 26 } else { 27 oUl.appendChild( oLi ); 28 } 29 30 } 31 32 } 33 34 } 35 36 } 37 </script> 38 </head> 39 40 <body> 41 <input type="text" id="text1" /> 42 <ul id="ul1"></ul> 43 </body> 44 </html>
键盘控制div移动：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width: 100px; height: 100px; background: red; position: absolute;} 8 </style> 9 <script> 10 window.onload = function() { 11 12 var oDiv = document.getElementById(‘div1‘); 13 14 //不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件 15 16 //onkeydown : 如果按下不抬起，那么会连续触发 17 //定时器 18 document.onkeydown = function(ev) { 19 20 var ev = ev || event; 21 22 switch(ev.keyCode) { 23 case 37: 24 oDiv.style.left = oDiv.offsetLeft - 10 + ‘px‘; 25 break; 26 case 38: 27 oDiv.style.top = oDiv.offsetTop - 10 + ‘px‘; 28 break; 29 case 39: 30 oDiv.style.left = oDiv.offsetLeft + 10 + ‘px‘; 31 break; 32 case 40: 33 oDiv.style.top = oDiv.offsetTop + 10 + ‘px‘; 34 break; 35 } 36 37 } 38 39 } 40 </script> 41 </head> 42 43 <body> 44 <div id="div1"></div> 45 </body> 46 </html>
Javascript 事件对象（六）键盘事件,布布扣,bubuko.com
标签：style class blog code java http
原文地址：http://www.cnblogs.com/trtst/p/3784766.html
