This is a basic JS code. Friends who want to learn JS can study it or expand it. It is best to use JS to control the entire keyboard, which will be very interesting.
The specific code is as follows:
Copy the code code as follows:
<style>
tr.highlight{background:#08246B;color:white;}
</style>
<table 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">
<!--
//Define initialization queue
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: //up key
currentLine--;
changeItem();
break;
case 39: //right click
currentCol++;
changeItem();
break;
case 40: //Down key
currentLine++;
changeItem();
break;
default:
break;
}
}
//Direction 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>