如何把键盘上的上下左右键与页面结合使用

例如有一个table，我点键盘上向上的箭头，光标移到上一行，点enter进入下一个页面，请给出详细的例子

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js测试</title><script type="text/javascript">
//索引，全局变量
var text_ind;
function of(text_index){
text_ind = text_index;
} function okd(text_value){
var code_value = event.keyCode;
var next_name;
var flag = false; var rng = document.selection.createRange();
rng.moveStart("character",-document.getElementById("t"+text_ind).value.length);
var gb_index = rng.text.length; //判断按键是否为 -->
if(code_value==39){
  //如果光标所在位置不是最后一个文本框,
  //当光标不是最后一个且光标是在文本值最后时发生
if(text_ind!=8 && gb_index==3){
flag = true;
next_name = "t"+(text_ind+1);
}
} //判断按键是否为 <--、
//当光标不是最后一个且光标是在文本值最前时发生
if(code_value==37){
if(text_ind !=0 && gb_index==0){
flag = true;
next_name = "t"+(text_ind-1);
}
} //判断按键是否为向上键
if(code_value==38){
//如果光标所在位置不是在第一行!
if(text_ind!=0 && text_ind!=1 && text_ind!=2){
flag = true;
next_name = "t"+(text_ind-3);
}
} //判断按键是否为向下键
if(code_value==40){
if(text_ind!=6 && text_ind!=7 && text_ind!=8){
flag = true;
next_name = "t"+(text_ind+3);
}
}
if(flag){
document.getElementById(next_name).focus();
}
}
</script>
</head>
<body>
<table align="center" width="100" height="50">

<tr>
<td> <input type="text" value="111" id="t0" onfocus="of(0)" onkeyup="okd('111')"/> </td>
<td> <input type="text" value="222" id="t1" onfocus="of(1)" onkeyup="okd('222')"/> </td>
<td> <input type="text" value="333" id="t2" onfocus="of(2)" onkeyup="okd('333')"/> </td>
</tr>
<tr>
<td> <input type="text" value="444" id="t3" onfocus="of(3)" onkeyup="okd('444')"/> </td>
<td> <input type="text" value="555" id="t4" onfocus="of(4)" onkeyup="okd('555')"/> </td>
<td> <input type="text" value="666" id="t5" onfocus="of(5)" onkeyup="okd('666')"/> </td>
</tr>
<tr>
<td> <input type="text" value="777" id="t6" onfocus="of(6)" onkeyup="okd('777')"/> </td>
<td> <input type="text" value="888" id="t7" onfocus="of(7)" onkeyup="okd('888')"/> </td>
<td> <input type="text" value="999" id="t8" onfocus="of(8)" onkeyup="okd('999')"/> </td>
</tr>
</table>
</body>
</html>IE下可以
可能是我说的不清楚，我希望的是:例如有如下table，然后把光标移到某一行上，按向下的键，光标移到下一行
<table width="75%" border="3" cellspacing="0" cellpadding="0">
  <tr>
    <td>hgj</td>
    <td>ghj</td>
    <td>ghj</td>
  </tr>
  <tr>
    <td>tj</td>
    <td>ghj</td>
    <td>ghcj</td>
  </tr>
  <tr>
    <td>gchj</td>
    <td>ghcj</td>
    <td>ghj</td>
  </tr>
</table>
table里面都是当前行用不同于默认的背景色来显示当前行的吧。在键盘事件里处理吧。keydown(fn)
概述
在每一个匹配元素的keydown事件中绑定一个处理函数。keydown事件会在键盘按下时触发。参数
fnFunction在每一个匹配元素的keydown事件中绑定的处理函数。示例
描述:
在页面内对键盘按键做出回应，可以使用如下代码:jQuery 代码:
$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // ...
  }
});