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

  这是一个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");

  if(currentCol<0){

  currentCol=objrow.length-1;

  }else if(currentCol==objrow.length){

  currentCol=0;

  }

  objrow[currentCol].select();

  //调试使用

  it.rows[currentLine].className="highlight";

  }

  //-->

  </script>