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

发布时间：2023-08-25 14:42:48 所属栏目：教程来源：

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

具体代码如下：

代码如下:

<style>

tr.highlight{background:#08246B;color:white;

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

具体代码如下：

代码如下:

<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");

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!