這是一個(gè)JS初級(jí)代碼,想學(xué)JS的朋友,可以研究下或者擴(kuò)展下,最好能用JS實(shí)現(xiàn)整個(gè)鍵盤的控制,那感覺(jué)就很有意思了。
具體代碼如下:
復(fù)制代碼 代碼如下:
<style>
tr.highlight{background:#08246B;color:white;}
</style>
<table>
<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;
  }
}
//方向鍵調(diào)用
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();
  //調(diào)試使用
  it.rows[currentLine].className="highlight";
}
//-->
</script>
新聞熱點(diǎn)
疑難解答
圖片精選