回车键(Enter)的触发事件 js 代码如下：
document.onkeydown = function (e) {
if (!e) e = window.event;
if ((e.keyCode || e.which) == 13) {
alert("触发了enter回车键！");
}
}
键盘事件顺便做下测试demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件测试</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
position: relative;
}
.img{
width: 32px;
height: 32px;
position: absolute;
}
</style>
</head>
<body>
<img src="img/right.png" alt="" class="img" id="img">
<script>
window.onload = function(){
var ismove = "";
var img = document.getElementsByClassName("img")[0];
var width = getWidth();
var height = getHeight();
document.onkeydown = function(e){
e = e || event;
// console.log(e.keyCode) //获取键盘编码
if(e.keyCode == 37 || e.keyCode == 65){
ismove = "left";
}
else if(e.keyCode == 38 || e.keyCode == 87){
ismove = "top";
}
else if(e.keyCode == 39 || e.keyCode == 68){
ismove = "right";
}
else if(e.keyCode == 40 || e.keyCode == 83){
ismove = "bottom";
}
}
document.onkeyup = function(){
ismove = "";
}
var timer = setInterval(function(){
switch(ismove){
case "left":
img.style.left = img.offsetLeft - 3 +"px";
img.src = "img/left.png";
break;
case "right":
img.style.left = img.offsetLeft + 3 +"px";
img.src = "img/right.png";
break;
case "top":
img.style.top = img.offsetTop - 3 +"px";
img.src = "img/top.png";
break;
case "bottom":
img.style.top = img.offsetTop + 3 +"px";
img.src = "img/down.png";
break;
}
if(img.offsetLeft<=0){
img.style.left = "0px"
}
if(img.offsetTop<=0){
img.style.top = "0px"
}
if(img.offsetLeft>=width - img.offsetWidth){
img.style.left = width - img.offsetWidth + "px"
}
if(img.offsetTop>=height - img.offsetHeight){
img.style.top = height - img.offsetHeight + "px"
}
}, 10);
// 获取页面可视区宽高 兼容所有浏览器 （简写）
function getWidth(){
return window.innerWidth || document.compatMode == CSS1Compat ? document.documentElement.clientWidth : document.body.clientWidth;
}
function getHeight(){
return window.innerHeight || document.compatMode == CSS1Compat ? document.documentElement.clientHeight : document.body.clientHeight;
}
// 获取页面可视区宽高 兼容所有浏览器
// function getWidth(){
// if(window.innerWidth){
// return window.innerWidth;
// }
// else{
// if(document.compatMode == "CSS1Compat"){
// return document.documentElement.clientWidth;
// }
// else{
// return document.body.clientWidth;
// }
// }
// }
// function getHeight(){
// if(window.innerHeight){
// return window.innerHeight;
// }
// else{
// if(document.compatMode == "CSS1Compat"){
// return document.documentElement.clientHeight;
// }
// else{
// return document.body.clientHeight;
// }
// }
// }
}
</script>
</body>
</html>
四个小坦克图片如下;
