javascript代码实现键盘控制方向

通过javascript代码实现对键盘上下左右方向键的控制,最好也有回车键的控制。不只是个很简单的例子,最好可以复杂点。
最好可以实现这样一个效果:有四张小图片,可以让鼠标在四个小图片上下跑,如果还能实现左右两个方向更好。

通过创建一个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刷新。
温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2017-11-26
<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>本回答被提问者采纳
第2个回答  2014-01-12
    // 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事件。


参考:http://www.thinkful.cn/archives/348.html

第3个回答  2014-01-17

用jquery做的实现方式如下:

    定义一个块元素(类似div),将其position定位absolute

    监听键盘事件,对方向键进行监听并绑定函数

    在函数中使用jquery的animate就能实现左右移动效果

    在codecademy上jquery课程有实例

追问

嗯,当时在一个公司上班,做游戏开发,要求不能用jquery啊!多谢你!

追答

这么奇怪的规定?

追问

当时是才开始做,看看我做的怎么样

追答

事件监听调浏览器兼容最蛋疼了

追问

确实啊

第4个回答  2014-01-03
这个其实非常简单的!
给你个示范,暂时只能用在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>

想知道更多??呵呵,你懂得!
相似回答