DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 利用JS來控制鍵盤的上下左右鍵
利用JS來控制鍵盤的上下左右鍵
編輯:JavaScript綜合知識     

 這篇文章主要介紹了利用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>  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved