您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

利用JS来控制键盘的上下左右键

作者:佚名    责任编辑:admin    更新时间:2022-06-22

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