これは基本的な JS コードです。JS を学びたい人は、JS を使ってキーボード全体を制御するのが最適です。これは非常に興味深いでしょう。
具体的なコードは次のとおりです。
次のようにコードをコピーします。
<スタイル>
tr.ハイライト{背景:#08246B;色:白;}
</スタイル>
<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>
</テーブル>
<スクリプト言語="javascript">
<!--
//初期化キューを定義する
var currentLine=-1;
var currentCol=-1;
document.onkeydown=function(e){
e=ウィンドウ.イベント||e;
switch(e.keyCode){
case 37: //左クリック
現在の列--;
ChangeItem();
壊す;
case 38: //上キー
現在の行--;
ChangeItem();
壊す;
case 39: //右クリック
現在のCol++;
ChangeItem();
壊す;
case 40: //下キー
現在のライン++;
ChangeItem();
壊す;
デフォルト：
壊す;
}
}
//方向キー呼び出し
関数changeItem(){
if(ドキュメント.すべて)
var it=document.getElementByIdx_x("ice").children[0];
それ以外
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){
現在の行=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){
現在の列=0;
}
objrow[currentCol].select();
//デバッグ用
it.rows[currentLine].className="ハイライト";
}
//-->
</script>