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

时间：2023-02-20 00:01:29
例如有一个table，我点键盘上向上的箭头，光标移到上一行，点enter进入下一个页面，请给出详细的例子

3 个解决方案

#1



<!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"> 

<!-- 下面的函数of()中传递的是索引(第几个文本框)；函数okd()中传递的是text的值 --> 

<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下可以

#2

可能是我说的不清楚，我希望的是:例如有如下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>

#3

table里面都是当前行用不同于默认的背景色来显示当前行的吧。

在键盘事件里处理吧。

keydown(fn) 
概述
在每一个匹配元素的keydown事件中绑定一个处理函数。

keydown事件会在键盘按下时触发。

参数
fnFunction在每一个匹配元素的keydown事件中绑定的处理函数。

示例
描述:
在页面内对键盘按键做出回应，可以使用如下代码:

jQuery 代码:
$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // ...
  }
});

#1



<!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"> 

<!-- 下面的函数of()中传递的是索引(第几个文本框)；函数okd()中传递的是text的值 --> 

<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下可以

#2

可能是我说的不清楚，我希望的是:例如有如下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>

#3

table里面都是当前行用不同于默认的背景色来显示当前行的吧。

在键盘事件里处理吧。

keydown(fn) 
概述
在每一个匹配元素的keydown事件中绑定一个处理函数。

keydown事件会在键盘按下时触发。

参数
fnFunction在每一个匹配元素的keydown事件中绑定的处理函数。

示例
描述:
在页面内对键盘按键做出回应，可以使用如下代码:

jQuery 代码:
$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // ...
  }
});
标签：

相关文章