回车键(Enter)的触发事件 js 代码如下：
document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode || e.which) == 13) { alert("触发了enter回车键！"); } }
键盘事件顺便做下测试demo：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>键盘事件测试</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 body,html{ 12 width: 100%; 13 height: 100%; 14 position: relative; 15 } 16 .img{ 17 width: 32px; 18 height: 32px; 19 position: absolute; 20 } 21 </style> 22 </head> 23 <body> 24 <img src="img/right.png" alt="" class="img" id="img"> 25 <script> 26 window.onload = function(){ 27 var ismove = ""; 28 var img = document.getElementsByClassName("img")[0]; 29 var width = getWidth(); 30 var height = getHeight(); 31 document.onkeydown = function(e){ 32 e = e || event; 33 // console.log(e.keyCode) //获取键盘编码 34 if(e.keyCode == 37 || e.keyCode == 65){ 35 ismove = "left"; 36 } 37 else if(e.keyCode == 38 || e.keyCode == 87){ 38 ismove = "top"; 39 } 40 else if(e.keyCode == 39 || e.keyCode == 68){ 41 ismove = "right"; 42 } 43 else if(e.keyCode == 40 || e.keyCode == 83){ 44 ismove = "bottom"; 45 } 46 } 47 document.onkeyup = function(){ 48 ismove = ""; 49 } 50 var timer = setInterval(function(){ 51 switch(ismove){ 52 case "left": 53 img.style.left = img.offsetLeft - 3 +"px"; 54 img.src = "img/left.png"; 55 break; 56 case "right": 57 img.style.left = img.offsetLeft + 3 +"px"; 58 img.src = "img/right.png"; 59 break; 60 case "top": 61 img.style.top = img.offsetTop - 3 +"px"; 62 img.src = "img/top.png"; 63 break; 64 case "bottom": 65 img.style.top = img.offsetTop + 3 +"px"; 66 img.src = "img/down.png"; 67 break; 68 } 69 if(img.offsetLeft<=0){ 70 img.style.left = "0px" 71 } 72 if(img.offsetTop<=0){ 73 img.style.top = "0px" 74 } 75 if(img.offsetLeft>=width - img.offsetWidth){ 76 img.style.left = width - img.offsetWidth + "px" 77 } 78 if(img.offsetTop>=height - img.offsetHeight){ 79 img.style.top = height - img.offsetHeight + "px" 80 } 81 }, 10); 82 // 获取页面可视区宽高 兼容所有浏览器 （简写） 83 function getWidth(){ 84 return window.innerWidth || document.compatMode == CSS1Compat ? document.documentElement.clientWidth : document.body.clientWidth; 85 } 86 function getHeight(){ 87 return window.innerHeight || document.compatMode == CSS1Compat ? document.documentElement.clientHeight : document.body.clientHeight; 88 } 89 // 获取页面可视区宽高 兼容所有浏览器 90 // function getWidth(){ 91 // if(window.innerWidth){ 92 // return window.innerWidth; 93 // } 94 // else{ 95 // if(document.compatMode == "CSS1Compat"){ 96 // return document.documentElement.clientWidth; 97 // } 98 // else{ 99 // return document.body.clientWidth; 100 // } 101 // } 102 // } 103 // function getHeight(){ 104 // if(window.innerHeight){ 105 // return window.innerHeight; 106 // } 107 // else{ 108 // if(document.compatMode == "CSS1Compat"){ 109 // return document.documentElement.clientHeight; 110 // } 111 // else{ 112 // return document.body.clientHeight; 113 // } 114 // } 115 // } 116 } 117 </script> 118 </body> 119 </html>
四个小坦克图片如下;
