javascript代码实现键盘控制方向
通过javascript代码实现对键盘上下左右方向键的控制，最好也有回车键的控制。不只是个很简单的例子，最好可以复杂点。最好可以实现这样一个效果：有四张小图片，可以让鼠标...
通过javascript代码实现对键盘上下左右方向键的控制，最好也有回车键的控制。不只是个很简单的例子，最好可以复杂点。
最好可以实现这样一个效果：有四张小图片，可以让鼠标在四个小图片上下跑，如果还能实现左右两个方向更好。 展开
最好可以实现这样一个效果：有四张小图片，可以让鼠标在四个小图片上下跑，如果还能实现左右两个方向更好。 展开
25个回答
展开全部
通过创建一个event.keyCode对象，有获取键盘上的方向键，运行代码后，点击键盘上的任意方向键。代码如下：
<html>
<head>
<title>取得键盘的方向键</title>
<script language="javascript">
<!--
function showkey(){
key = event.keyCode;
if (key == 37) alert("按了←键！");
if (key == 38) alert("按了↑键！");
if (key == 39) alert("按了→键！");
if (key == 40) alert("按了↓键！");
}
document.onkeydown=showkey;
-->
</script>
</head>
<body>
请按方向键←↑→↓
</body>
</html><br /><center>如不能显示效果，按Ctrl+F5刷新。
<html>
<head>
<title>取得键盘的方向键</title>
<script language="javascript">
<!--
function showkey(){
key = event.keyCode;
if (key == 37) alert("按了←键！");
if (key == 38) alert("按了↑键！");
if (key == 39) alert("按了→键！");
if (key == 40) alert("按了↓键！");
}
document.onkeydown=showkey;
-->
</script>
</head>
<body>
请按方向键←↑→↓
</body>
</html><br /><center>如不能显示效果，按Ctrl+F5刷新。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
tr.highlight{background:#08246B;color:white;}
</style>
<table border="1" width="70%" id="ice">
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
</table>
<script language="javascript">
<!--
//定义初始化行列
var currentLine=-1;
var currentCol=-1;
document.onkeydown=function(e){
e=window.event||e;
switch(e.keyCode){
case 37: //左键
currentCol--;
changeItem();
break;
case 38: //向上键
currentLine--;
changeItem();
break;
case 39: //右键
currentCol++;
changeItem();
break;
case 40: //向下键
currentLine++;
changeItem();
break;
default:
break;
}
}
//方向键调用
function changeItem(){
if(document.all)
var it=document.getElementByIdx_x("ice").children[0];
else
var it=document.getElementByIdx_x("ice");
for(i=0;i<it.rows.length;i++){
it.rows[i].className="";
}
if(currentLine<0){
currentLine=it.rows.length-1;
}
if(currentLine==it.rows.length){
currentLine=0;
}
var objtab=document.all.ice;
var objrow=objtab.rows[currentLine].getElementsByTagName_r("INPUT");
if(currentCol<0){
currentCol=objrow.length-1;
}else if(currentCol==objrow.length){
currentCol=0;
}
objrow[currentCol].select();
//调试使用
it.rows[currentLine].className="highlight";
}
//-->
</script>
tr.highlight{background:#08246B;color:white;}
</style>
<table border="1" width="70%" id="ice">
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
</table>
<script language="javascript">
<!--
//定义初始化行列
var currentLine=-1;
var currentCol=-1;
document.onkeydown=function(e){
e=window.event||e;
switch(e.keyCode){
case 37: //左键
currentCol--;
changeItem();
break;
case 38: //向上键
currentLine--;
changeItem();
break;
case 39: //右键
currentCol++;
changeItem();
break;
case 40: //向下键
currentLine++;
changeItem();
break;
default:
break;
}
}
//方向键调用
function changeItem(){
if(document.all)
var it=document.getElementByIdx_x("ice").children[0];
else
var it=document.getElementByIdx_x("ice");
for(i=0;i<it.rows.length;i++){
it.rows[i].className="";
}
if(currentLine<0){
currentLine=it.rows.length-1;
}
if(currentLine==it.rows.length){
currentLine=0;
}
var objtab=document.all.ice;
var objrow=objtab.rows[currentLine].getElementsByTagName_r("INPUT");
if(currentCol<0){
currentCol=objrow.length-1;
}else if(currentCol==objrow.length){
currentCol=0;
}
objrow[currentCol].select();
//调试使用
it.rows[currentLine].className="highlight";
}
//-->
</script>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
// ctrl+s手动保存
$('#edui1_iframeholder').keydown(function(e) {
if(e.keyCode==83 && e.ctrlKey) {
e.preventDefault();
LS.setItem(draft_name, edt.getContent());
tmp_mt = mt();
}
});
示例代码如上。
主要是对键盘上的按键事件进行监控，使用onkeydown事件。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jquery做的实现方式如下:
定义一个块元素(类似div),将其position定位absolute
监听键盘事件,对方向键进行监听并绑定函数
在函数中使用jquery的animate就能实现左右移动效果
在codecademy上jquery课程有实例
更多追问追答
追问
嗯，当时在一个公司上班，做游戏开发，要求不能用jquery啊！多谢你！
追答
这么奇怪的规定?
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个其实非常简单的！
给你个示范，暂时只能用在ie 的，chrome,ff不行
主要是懒的搞！
<script>
function arrowhandle(){
var elem=document.getElementById('divx');
var top=elem.currentStyle['top'];
var left=elem.currentStyle['left'];
switch(event.keyCode)
{
case 37:
elem.style.left=parseInt(left)-5+"px";
break;
case 38:
elem.style.top=parseInt(top)-5+"px";
break;
case 39:
elem.style.left=parseInt(left)+5+"px";
break;
case 40:
elem.style.top=parseInt(top)+5+"px";
break;
}
}
document.onkeyup=arrowhandle;
</script>
</head>
<body>
<div id='divx' style="left:300px;top:500px;width:200px;heigth:300px;position:absolute;background-color:gray;">
<p>hello,world!</p>
</div>
想知道更多？？呵呵，你懂得！
给你个示范，暂时只能用在ie 的，chrome,ff不行
主要是懒的搞！
<script>
function arrowhandle(){
var elem=document.getElementById('divx');
var top=elem.currentStyle['top'];
var left=elem.currentStyle['left'];
switch(event.keyCode)
{
case 37:
elem.style.left=parseInt(left)-5+"px";
break;
case 38:
elem.style.top=parseInt(top)-5+"px";
break;
case 39:
elem.style.left=parseInt(left)+5+"px";
break;
case 40:
elem.style.top=parseInt(top)+5+"px";
break;
}
}
document.onkeyup=arrowhandle;
</script>
</head>
<body>
<div id='divx' style="left:300px;top:500px;width:200px;heigth:300px;position:absolute;background-color:gray;">
<p>hello,world!</p>
</div>
想知道更多？？呵呵，你懂得！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（23）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
