zl程序教程

您现在的位置是:首页 >  后端

当前栏目

利用JS来控制键盘的上下左右键(示例代码)

JS控制代码 利用 示例 键盘 上下左右
2023-06-13 09:15:14 时间

这是一个JS初级代码,想学JS的朋友,可以研究下或者扩展下,最好能用JS实现整个键盘的控制,那感觉就很有意思了。

具体代码如下:

复制代码代码如下:

<style>
tr.highlight{background:#08246B;color:white;}
</style>
<tableborder="1"width="70%"id="ice">
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
</table>
<scriptlanguage="javascript">
<!--
//定义初始化行列
varcurrentLine=-1;
varcurrentCol=-1;
document.onkeydown=function(e){
 e=window.event||e;
 switch(e.keyCode){
   case37://左键
     currentCol--;
     changeItem();
     break;
   case38://向上键
     currentLine--;
     changeItem();
     break;
   case39://右键
     currentCol++;
     changeItem();
     break;
   case40://向下键
     currentLine++;
     changeItem();
     break;
   default:
     break;
 }
}
//方向键调用
functionchangeItem(){
 if(document.all)
   varit=document.getElementByIdx_x("ice").children[0];
 else
   varit=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;
 }
 varobjtab=document.all.ice;
 varobjrow=objtab.rows[currentLine].getElementsByTagName_r("INPUT");
 if(currentCol<0){
   currentCol=objrow.length-1;
 }elseif(currentCol==objrow.length){
   currentCol=0;
 }
 objrow[currentCol].select();
 //调试使用
 it.rows[currentLine].className="highlight";
}
//-->
</script>