JS to control the keyboard around the keys of the sample code
- 2020-03-30 00:51:28
- OfStack
This is a JS beginner code, want to learn JS friends, you can study or extend, it is best to use JS to achieve the control of the entire keyboard, it is very interesting.
The specific code is as follows:
<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">
<!--
//Defines initialization rows and rows
var currentLine=-1;
var currentCol=-1;
document.onkeydown=function(e){
e=window.event||e;
switch(e.keyCode){
case 37: // left-click
currentCol--;
changeItem();
break;
case 38: //The up key
currentLine--;
changeItem();
break;
case 39: // Right click
currentCol++;
changeItem();
break;
case 40: //Down keys
currentLine++;
changeItem();
break;
default:
break;
}
}
//Key call
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();
//Debugging use
it.rows[currentLine].className="highlight";
}
//-->
</script>