Excelのような操作感でフォーム入力をしたい

質問

テーブルタグで組んだカレンダーに毎日の予定や特記事項を書き込むＣＧＩを作成しようとしています。
そこで、Excelで入力セルを移動するかのように、キーボードの方向キー（→↑↓←）で他のインプットエリアに移動しながら入力できる操作が実現できないか検討中です。

もし上記のような操作を実現しているデモ画面や、サンプルプログラムをご存知の方がいればご教示願えないでしょうか。
宜しくお願い致します。

回答No.1

noname#30334 · ベストアンサー

Ajax等のライブラリ類を使えば、スマートで多機能な方法を導入出来るのかもしれませんが・・・
そういう小洒落たものを知らないので、JavaScriptでごりごりと。。。

<SCRIPT language="JavaScript">
<!--
function KeyDown(Kcode, Row, Col) {
switch(Kcode){
case 37: //←
if (Col > 1) {
document.frmMatrix.elements["cell[" + Row + "][" + (Col - 1) + "]"].focus();
}
break;
case 38: //↑
if (Row > 1) {
document.frmMatrix.elements["cell[" + (Row - 1) + "][" + Col + "]"].focus();
}
break;
case 39: //→
if (Col < 3) {
document.frmMatrix.elements["cell[" + Row + "][" + (Col + 1) + "]"].focus();
}
break;
case 40: //↓
if (Row < 3) {
document.frmMatrix.elements["cell[" + (Row + 1) + "][" + Col + "]"].focus();
}
break;
}
}
//-->
</SCRIPT>

<FORM method="post" name="frmMatrix" action="">
<TABLE border="0" cellpadding="2" cellspacing="0">
<TR>
<TD><INPUT type="text" name="cell[1][1]" onKeyDown="KeyDown(event.keyCode, 1, 1)"></TD>
<TD><INPUT type="text" name="cell[1][2]" onKeyDown="KeyDown(event.keyCode, 1, 2)"></TD>
<TD><INPUT type="text" name="cell[1][3]" onKeyDown="KeyDown(event.keyCode, 1, 3)"></TD>
</TR>
<TR>
<TD><INPUT type="text" name="cell[2][1]" onKeyDown="KeyDown(event.keyCode, 2, 1)"></TD>
<TD><INPUT type="text" name="cell[2][2]" onKeyDown="KeyDown(event.keyCode, 2, 2)"></TD>
<TD><INPUT type="text" name="cell[2][3]" onKeyDown="KeyDown(event.keyCode, 2, 3)"></TD>
</TR>
<TR>
<TD><INPUT type="text" name="cell[3][1]" onKeyDown="KeyDown(event.keyCode, 3, 1)"></TD>
<TD><INPUT type="text" name="cell[3][2]" onKeyDown="KeyDown(event.keyCode, 3, 2)"></TD>
<TD><INPUT type="text" name="cell[3][3]" onKeyDown="KeyDown(event.keyCode, 3, 3)"></TD>
</TR>
</TABLE>
</FORM>