這篇文章主要介紹了利用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>