- ベストアンサー
入力フォームのカーソル移動の設計の仕方
- Webページに多くの入力フォームを使い、EXCELの縦横10行×5列の表のような入力をさせたい
- Webアプリを設計する上で入力のしやすい画面は、どのような工夫・設計・仕様にすれば使いやすいWebアプリになるのか
- プログラム言語やサーバ言語は任意で、IEかネットスケープを使ったWebアプリを考えている
- spice_piri
- お礼率76% (23/30)
- CSS
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
多分こんなのが欲しいのでしょう。 差分 操作キーの追加 マウスでのクリック後の誤動作の修正 入力許可 その他表示項目 操作方法 * ↑ + ↓ - → / ← SAMPLE/ <html> <head> <script language="JavaScript"> <!-- //ここでは文字表示用の省略用です。 var TITLE=new Array(); TITLE[0]='SAMPLE (c)Shorn Fonda'; TITLE[1]=''; TITLE[2]='<center>A</center>'; TITLE[3]='<center>B</center>'; TITLE[4]='<center>C</center>'; TITLE[5]='<center>D</center>'; TITLE[6]='<center>E</center>'; TITLE[7]='<center>0</center>'; TITLE[8]='<center>1</center>'; TITLE[9]='<center>2</center>'; TITLE[10]='<center>3</center>'; TITLE[11]='<center>4</center>'; TITLE[12]='<center>5</center>'; TITLE[13]='<center>6</center>'; TITLE[14]='<center>7</center>'; TITLE[15]='<center>8</center>'; TITLE[16]='<center>9</center>'; //ここではもしCGI等に送る時にINPUT name="****"にするための省略用です。 //ここで入力するとかってにname="入力した値"としてセットされます。 var NAME = new Array(); NAME[0] = ''; NAME[1] = ''; NAME[2] = ''; NAME[3] = ''; NAME[4] = ''; NAME[5] = ''; NAME[6] = ''; NAME[7] = ''; NAME[8] = ''; NAME[9] = ''; NAME[10] = ''; NAME[11] = ''; NAME[12] = ''; NAME[13] = ''; NAME[14] = ''; NAME[15] = ''; NAME[16] = ''; NAME[17] = ''; NAME[18] = ''; NAME[19] = ''; NAME[20] = ''; NAME[21] = ''; NAME[22] = ''; NAME[23] = ''; NAME[24] = ''; NAME[25] = ''; NAME[26] = ''; NAME[27] = ''; NAME[28] = ''; NAME[29] = ''; NAME[30] = ''; NAME[31] = ''; NAME[32] = ''; NAME[33] = ''; NAME[34] = ''; NAME[35] = ''; NAME[36] = ''; NAME[37] = ''; NAME[38] = ''; NAME[39] = ''; NAME[40] = ''; NAME[41] = ''; NAME[42] = ''; NAME[43] = ''; NAME[44] = ''; NAME[45] = ''; NAME[46] = ''; NAME[47] = ''; NAME[48] = ''; NAME[49] = ''; //次処理用メソッド function EndManagement(){ confirm('この後次処理に送ると便利です'); if ( TorF == true ){ } else{ } } window.onload = FSTPositionSet; document.onkeypress = MovePosition; var PosX=0; var PosY=0; var LineMaxX=5-1; var LineMaxY=10-1; var KEYCODE = new Array(); KEYCODE[0]= 43;// + KEYCODE[1]= 45;// - KEYCODE[2]= 42;// * KEYCODE[3]= 47;// / var MoveX = new Array(); var MoveY = new Array(); MoveX[0]=0; MoveY[0]=1; MoveX[1]=1; MoveY[1]=0; MoveX[2]=0; MoveY[2]=-1; MoveX[3]=-1; MoveY[3]=0; function ClickPosition(doc){ Num=0; for(i=0;i<document.forms[0].length;i++){ if(doc==document.forms[0].elements[i]){ Num=i; } } PosX=Num%5; PosY=(Num-PosX)/5; } function FSTPositionSet(){ document.title=TITLE[0]; for(i=0;i<document.forms[0].elements.length;i++){ document.forms[0].elements[i].name=NAME[i]; } PosX=0; PosY=0; document.forms[0].elements[0].focus(); } function MovePosition(){ switch(event.keyCode){ case KEYCODE[0]: if(PosY!=LineMaxY){ PosX=PosX+MoveX[0]; PosY=PosY+MoveY[0]; }else if(PosX!=LineMaxX){ PosX++; PosY=0; }else{ event.keyCode=null; EndManagement(); } break; case KEYCODE[1]: if(PosX!=LineMaxX){ PosX=PosX+MoveX[1]; PosY=PosY+MoveY[1]; }else if(PosY!=LineMaxY){ PosX=0; PosY++; }else{ event.keyCode=null; EndManagement(); } break; case KEYCODE[2]: if(PosY!=0){ PosX=PosX+MoveX[2]; PosY=PosY+MoveY[2]; }else if(PosX!=0){ PosX--; PosY=0; } break; case KEYCODE[3]: if(PosX!=0){ PosX=PosX+MoveX[3]; PosY=PosY+MoveY[3]; }else if(PosY!=0){ PosX=0; PosY--; } break; } i=PosY*5+PosX; switch(event.keyCode){ case KEYCODE[0]: case KEYCODE[1]: case KEYCODE[2]: case KEYCODE[3]: event.keyCode=null; break; } document.forms[0].elements[i].focus(); } function inTitle(i){ document.write(TITLE[i]); } //--> </script> </head> <body> <form name="main"> <br> <script language="JavaScript"> <!-- inTitle('0'); //--> </script> <br> <table><tr> <td class="000"width="120"> <script language="JavaScript"> <!-- inTitle('1'); //--> </script> </td> <td class="00"width="120"> <script language="JavaScript"> <!-- inTitle('2'); //--> </script> </td> <td class="00"width="120"> <script language="JavaScript"> <!-- inTitle('3'); //--> </script> </td> <td class="00"width="120"> <script language="JavaScript"> <!-- inTitle('4'); //--> </script> </td> <td class="00"width="120"> <script language="JavaScript"> <!-- inTitle('5'); //--> </script> </td> <td class="00"width="120"> <script language="JavaScript"> <!-- inTitle('6'); //--> </script> </td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('7'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('8'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('9'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('10'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('11'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('12'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('13'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('14'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('15'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr><tr> <td class="00"> <script language="JavaScript"> <!-- inTitle('16'); //--> </script> </td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> <td><INPUT TYPE="text" SIZE="20" onClick="ClickPosition(this);"></td> </tr></table> </form> </body> </html>
その他の回答 (3)
- shorn
- ベストアンサー率41% (12/29)
ちなみにANo.#2,SAMPLEには抜けてる機能も多いです。 参考までにということです。
- shorn
- ベストアンサー率41% (12/29)
JavaScriptだけでも可能です。 以下のSAMPLEは+は下へ移動-は横へ移動するプログラムです。 クロスブラウザにするように気をつけてないのでNNで動かなければ手を加えてください。 SAMPLE 動作確認 IE5/WIN2K SAMPLE/ <html> <head> <script language="JavaScript"> <!-- window.onload = FSTPositionSet; document.onkeypress = MovePosition; //onkeypress="WhenKeyPress()" var PosX=0; var PosY=0; var LineMaxX=5-1; var LineMaxY=10-1; var KEYCODE = new Array(); KEYCODE[0]= 43; KEYCODE[1]= 45; var MoveX = new Array(); var MoveY = new Array(); MoveX[0]=0; MoveY[0]=1; MoveX[1]=1; MoveY[1]=0; function FSTPositionSet(){ PosX=0; PosY=0; document.forms[0].elements[0].focus(); } function MovePosition(){ switch(event.keyCode){ case KEYCODE[0]: if(PosY!=LineMaxY){ PosX=PosX+MoveX[0]; PosY=PosY+MoveY[0]; }else if(PosX!=LineMaxX){ PosX++; PosY=0; }else{ event.keyCode=null; EndManagement(); } break; case KEYCODE[1]: if(PosX!=LineMaxX){ PosX=PosX+MoveX[1]; PosY=PosY+MoveY[1]; }else if(PosY!=LineMaxY){ PosX=0; PosY++; }else{ event.keyCode=null; EndManagement(); } break; } i=PosY*5+PosX; event.keyCode=null; document.forms[0].elements[i].focus(); } function EndManagement(){ confirm('この後次処理に送ると便利です'); if ( TorF == true ){ } else{ } } //--> </script> </head> <body bgcolor="#ffffff"> <form name="main"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"> <INPUT TYPE="text" SIZE="20"><br> </form> </form> </body> </html>
補足
JavaScriptでの実施例ありがとうございます。 JavaScriptで実現できるなら便利ですね。 私はJavaScriptをよく知らないので、さらに教えて頂きたいのですが、 教えて頂いた方法で、フォーカスの移動ができることができました。移動先のテキストフォームに文字の入力は可能ですか？
- ceita
- ベストアンサー率24% (304/1218)
HTMLを利用したWEBアプリですと、どうしても入力とかに制限が出てしまいますよね。 以下アイデアです、 ・大きなテキスト入力フォームに区切り文字(","とか）で、 区切って入力してもらって、 CGIプログラムのほうで表に変換する。 ・JAVAアプレットならば多分、 表(Gridとかよぶのかな？）で、入力も可能だとおもうので、 JAVAで作る。 ・専用ソフトを作成してしまう。 うーむ、あんまりいいアイデアが出ませんね。
お礼
すっっっげー！の一言です。 こういうことがWebでも実現できるんですねー。 コードを解読するにはかなりの時間がかかりますが・・・。 うーむ。Webアプリを作る人はここまで、ユーザーインターフェースを考えないといけないですね。 今回は本当に勉強させて頂きました。 ありがとうございました。