javascript代码实现键盘控制方向

发布网友发布时间：2022-04-25 13:09

共15个回答

热心网友时间：2022-04-07 07:10

通过创建一个event.keyCode对象，有获取键盘上的方向键，运行代码后，点击键盘上的任意方向键。代码如下：
<html>
<head>
<title>取得键盘的方向键</title>
<script language="javascript">

</script>
</head>
<body>
请按方向键←↑→↓
</body>
</html><br /><center>如不能显示效果，按Ctrl+F5刷新。

热心网友时间：2022-04-07 08:28

热心网友时间：2022-04-07 10:03

    // ctrl+s手动保存
    $('#ei1_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

热心网友时间：2022-04-07 11:54

用jquery做的实现方式如下:

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

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

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

在codecademy上jquery课程有实例

热心网友时间：2022-04-07 14:02

这个其实非常简单的！
给你个示范，暂时只能用在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>

想知道更多？？呵呵，你懂得！

热心网友时间：2022-04-07 16:27

01<script type="text/javascript">
02//这个就是键盘触发的函数
03var SubmitOrHidden = function(evt){
04 evt = window.event || evt;
05 if(evt.keyCode!=13){//如果取到的键值是回车
06 //do something
07 }else{
08 //其他键 dosomething
09 }
10
11}
12window.document.onkeydown=SubmitOrHidden;//当有键按下时执行函数
13</script>
14附常用功能键
15常数值描述
16vbKeyBack 8 BACKSPACE 键
17vbKeyTab 9 TAB 键
18vbKeyReturn 13 ENTER 键
19vbKeyShift 16 SHIFT 键
20vbKeyControl 17 CTRL 键
21vbKeyCapital 20 CAPS LOCK 键
22vbKeyEscape 27 ESC 键
23vbKeySpace 32 SPACEBAR 键
24vbKeyPageUp 33 PAGEUP 键
25vbKeyPageDown 34 PAGEDOWN 键
26vbKeyEnd 35 END 键
27vbKeyPrint 42 PRINT SCREEN 键
28vbKeyDelete 46 DEL 键
29vbKeyNumlock 144 NUM LOCK 键追问你说的这个我知道，第一是要出现键盘控制的效果，要结合方向键来控制图片。感谢你啊！

热心网友时间：2022-04-07 19:08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>在div内部拖动div</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
</head>
<body>
<div id="main"></div>
</body>
</html>
<script type="text/javascript">
var main = document.getElementById("main");
document.onkeydown = function(event){
event = event || window.event;
var keycode = event.keyCode || event.which;

switch(keycode){
case 13:
main.innerHTML = "enter";
break;
case 37:
main.innerHTML = "zuo";
break;
case 38:
main.innerHTML = "shang";
break;
case 39:
main.innerHTML = "you";
break;
case 40:
main.innerHTML = "xia";
break;
}
};
</script>

追问非常感谢！这个效果还没完全实现。
朋友，能不能实现一个效果：有四个小图片，可以用键盘的上下键来让焦点在这四个小图片上下动。如果可以，我自己试试左右两个方向。
如果可能，万分感谢！！！

追答这个有点难，我得考虑一下

热心网友时间：2022-04-07 22:06

// jquery快捷键事件
$(document).keydown(function(e) {
if (e.ctrlKey && e.which == 65) {
……………………
} else if (e.ctrlKey && e.which == 83) {
…………………………
} else if (e.which == 27) {
……………………
}
});

热心网友时间：2022-04-08 01:21

js是没有办法控制鼠标位置的，只能控制图片位置。可以通过对document的keyup事件进行监听，根据事件的eventKey来做相应判断。

热心网友时间：2022-04-08 04:52

onkeydown onkeyup事件 keycode左：37上：38 右:39 下:40，然后就是计算了，这个。。。你慢慢算吧

热心网友时间：2022-04-08 08:40

keycode 35 = End
keycode 36 = Home
keycode 37 = Left
keycode 38 = Up
keycode 39 = Right
keycode 40 = Down
使用举例：
<input type="text" name="passwd" onkeydown="if(event.keyCode == 13) alert("Enter");"/>
纯手写，玩采纳

热心网友时间：2022-04-08 12:45

每个按键都有特定标识符，获取到后进行判断就行了。

热心网友时间：2022-04-08 17:06

这个其实就是对键盘事件监听处理（回车键也是一样的）
书的话当然推荐：JavaScript高级程序设计

热心网友时间：2022-04-08 21:44

监控keydown事件，判断e.keycode的值，37，38，39，40是方向键

热心网友时间：2022-04-09 02:39

用事件监听可以做到

全部栏目

javascript代码实现键盘控制方向