js键盘事件问题
我这里写了一段键盘事件，当然是错的就是说按一下方向键，里面的div就向上移动请问下这代码要怎么写<body><divid="box"style="width:100px;...
我这里写了一段键盘事件，当然是错的
就是说按一下方向键，里面的div就向上移动
请问下这代码要怎么写
<body>
<div id="box" style="width:100px; height:100px; background:#ccc; line-height:100px; text-align:center; position:absolute; left:200px; top:400px;">go</div>
<script type="text/javascript">
var box=document.getElementById("box");
box.onkeydown=function(event){
if(event.keyCode == 13){
alert('haha')}
}
</script>
</body> 展开
就是说按一下方向键，里面的div就向上移动
请问下这代码要怎么写
<body>
<div id="box" style="width:100px; height:100px; background:#ccc; line-height:100px; text-align:center; position:absolute; left:200px; top:400px;">go</div>
<script type="text/javascript">
var box=document.getElementById("box");
box.onkeydown=function(event){
if(event.keyCode == 13){
alert('haha')}
}
</script>
</body> 展开
2个回答
展开全部
第一：div是不支持onkeydown事件的。
第二：up键的ascii码不是13.
要想用键盘来控制div你可以用document的onkeydowm事件。
代码如下：
<script type="text/javascript">
document.onkeydown = function(event){
var box = document.getElementById("box")
if(event.keyCode==38){//up
var topdistance = document.getElementById("box").style.top;
var topdistance2 = parseInt(topdistance)-100;
box.style.top = topdistance2+"px";
}
else if(event.keyCode==40){//down
var bottomdistance = document.getElementById("box").style.top;
var bottomdistance2 = parseInt(bottomdistance)+100;
box.style.top = bottomdistance2+"px";
}
else if(event.keyCode==37){//left
var leftdistance = document.getElementById("box").style.left;
var leftdistance2 = parseInt(leftdistance)-100;
box.style.left = leftdistance2+"px";
}
else if(event.keyCode==39){//right
var rightdistance = document.getElementById("box").style.left;
var rightdistance2 = parseInt(rightdistance)+100;
box.style.left = rightdistance2+"px";
}
}
</script>
这样你就可以用上下左右键来移动你的div了。
当然如果你想更友好一些的话，你可以再判断一些是否到了浏览器边界。如果到了就不让它继续移动，或者从浏览器的对面重新开始移动。
第二：up键的ascii码不是13.
要想用键盘来控制div你可以用document的onkeydowm事件。
代码如下：
<script type="text/javascript">
document.onkeydown = function(event){
var box = document.getElementById("box")
if(event.keyCode==38){//up
var topdistance = document.getElementById("box").style.top;
var topdistance2 = parseInt(topdistance)-100;
box.style.top = topdistance2+"px";
}
else if(event.keyCode==40){//down
var bottomdistance = document.getElementById("box").style.top;
var bottomdistance2 = parseInt(bottomdistance)+100;
box.style.top = bottomdistance2+"px";
}
else if(event.keyCode==37){//left
var leftdistance = document.getElementById("box").style.left;
var leftdistance2 = parseInt(leftdistance)-100;
box.style.left = leftdistance2+"px";
}
else if(event.keyCode==39){//right
var rightdistance = document.getElementById("box").style.left;
var rightdistance2 = parseInt(rightdistance)+100;
box.style.left = rightdistance2+"px";
}
}
</script>
这样你就可以用上下左右键来移动你的div了。
当然如果你想更友好一些的话，你可以再判断一些是否到了浏览器边界。如果到了就不让它继续移动，或者从浏览器的对面重新开始移动。
更多追问追答
追问
谢谢了
但是代码出错了，keyCode为空或不是对象，
不知道怎么解决 按键了也没反映
追答
我这边测试了好几次都正常，我把整个网页的代码都黏贴给你看一下。
document.onkeydown = function(event){
var box = document.getElementById("box")
if(event.keyCode==38){//up
var topdistance = document.getElementById("box").style.top;
var topdistance2 = parseInt(topdistance)-100;
box.style.top = topdistance2+"px";
}
else if(event.keyCode==40){//down
var bottomdistance = document.getElementById("box").style.top;
var bottomdistance2 = parseInt(bottomdistance)+100;
box.style.top = bottomdistance2+"px";
}
else if(event.keyCode==37){//left
var leftdistance = document.getElementById("box").style.left;
var leftdistance2 = parseInt(leftdistance)-100;
box.style.left = leftdistance2+"px";
}
else if(event.keyCode==39){//right
var rightdistance = document.getElementById("box").style.left;
var rightdistance2 = parseInt(rightdistance)+100;
box.style.left = rightdistance2+"px";
}
}
go
遇到这种问题，多上网搜搜，其实我也是看着网上的方法解决的这个问题，以前也没注意过。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
