入力フォームのカーソル移動の設計の仕方

このQ&Aのポイント
  • Webページに多くの入力フォームを使い、EXCELの縦横10行×5列の表のような入力をさせたい
  • Webアプリを設計する上で入力のしやすい画面は、どのような工夫・設計・仕様にすれば使いやすいWebアプリになるのか
  • プログラム言語やサーバ言語は任意で、IEかネットスケープを使ったWebアプリを考えている
回答を見る
  • ベストアンサー

入力フォームのカーソル移動の設計の仕方

Webページに多くの入力フォームを使い、EXCELの縦横10行×5列の表のような入力をさせたいのですが、Webの場合、通常、入力フォームの移動は「Tab」キーになってしまい、Excelの「Enter」とは異なります。 左手は伝票の束を持って、ページをめくる感じになり、とても「Tab」キーを押す余裕がありません。キーボードの配置を変えるツールを使って、「+」キーを「Tab」キーにするなどの工夫が考えられますが、Webアプリを設計する上で、入力のしやすい画面(入力インターフェイス)は、どのような工夫・設計・仕様にすれば、使いやすいWebアプリになるのでしょうか? ここでは、プログラム言語、サーバ言語など任意(何でもOK)としてください。 ただ、IEかネットスケープを使ったWebアプリを考えています。 よろしくお願い致します。

  • CSS
  • 回答数4
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • shorn
  • ベストアンサー率41% (12/29)
回答No.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>

spice_piri
質問者

お礼

すっっっげー!の一言です。 こういうことがWebでも実現できるんですねー。 コードを解読するにはかなりの時間がかかりますが・・・。 うーむ。Webアプリを作る人はここまで、ユーザーインターフェースを考えないといけないですね。 今回は本当に勉強させて頂きました。 ありがとうございました。

その他の回答 (3)

  • shorn
  • ベストアンサー率41% (12/29)
回答No.3

ちなみにANo.#2,SAMPLEには抜けてる機能も多いです。 参考までにということです。

  • shorn
  • ベストアンサー率41% (12/29)
回答No.2

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>

spice_piri
質問者

補足

JavaScriptでの実施例ありがとうございます。 JavaScriptで実現できるなら便利ですね。 私はJavaScriptをよく知らないので、さらに教えて頂きたいのですが、 教えて頂いた方法で、フォーカスの移動ができることができました。移動先のテキストフォームに文字の入力は可能ですか?

  • ceita
  • ベストアンサー率24% (304/1218)
回答No.1

HTMLを利用したWEBアプリですと、どうしても入力とかに制限が出てしまいますよね。 以下アイデアです、 ・大きなテキスト入力フォームに区切り文字(","とか)で、  区切って入力してもらって、  CGIプログラムのほうで表に変換する。 ・JAVAアプレットならば多分、  表(Gridとかよぶのかな?)で、入力も可能だとおもうので、  JAVAで作る。 ・専用ソフトを作成してしまう。 うーむ、あんまりいいアイデアが出ませんね。

関連するQ&A

  • Enterキーでフォームの入力フィールド移動をしたい

    フォームの入力項目間の移動を行うのに、普通はTABキーを使うよう なのですが、Enterキーで移動して、送信ボタンまで来たら、それ もEnterキーで送信という動作にしたいと思います。 しかし、入力項目のところでEnterキーを押すと、次の項目へ移動 するのではなく、送信ボタンが押されてしまいますよね? そうさせずに、上記のような動作をさせるにはどうすれば良いのでしょ うか? 同じような質問をどこかで見たような気がしたのですが、見つ けることができませんでした。よろしくお願いします。

  • エクセルに貼り付けた入力フォームの中身を、別のセルに移したい

    例えば、YAHOOトップページの検索フォームの周りなどをコピーして、エクセルに貼り付けると、入力フォームもエクセルに貼り付けられるのですが、このフォーム内のテキストを別のセルに移し変えられるような、計算式かマクロを組みたいと考えております。 上記のような仕組みの設計について、詳しく説明してあるページなどありましたら、ご教授いただけないでしょうか。

  • 入力フォームをエクセルに書き出す

    質問させてください。 Web上の入力フォームに入力された内容を単純にエクセルに書き出したいのですが、方法がわからず困っています。 たしか、Javascriptで何か命令語があったと思うのですが。。。 フォーム1の内容をエクセルシート1Aに フォーム2の内容をエクセルシート1Bに。。。 のような処理を行いたいのですが、ご教授いただけないでしょうかm(__)m

  • Firefoxの入力フォームのフォントの大きさについて

    Firefoxでは、Webのフォーム入力のフォントが、IEやその他の ブラウザに比べて大きく表示されてしまいます。 フォントの大きさは、Ctrlキー+ホイールマウスで自由自在に 変更できるのですが、そうすると当然、Webページ全体の フォントも小さくなってしまいます。 質問ですが、Firefoxのフォーム内のフォントの大きさを、常に他の ブラウザ同様の標準の大きさで表示するような設定はありますか? フォーム入力中だけフォントが大きくて、とても作業がしづらいので 困っています。 宜しくお願いします。

  • excelでのウェブの入力フォームへの入力について

    excelを使ってwebの入力フォームを一発で入力したいのですが、やり方がよくわかりません・・・。 どなたかご存知の方、教えていただけると大変助かります。 お願いします!

  • EXCEL(エクセル)のデータをWebフォームへ入力

    エクセルの行(複数セル)に入力したデータがあります。 この複数セルの選択した部分を、Webフォームのテキスト入力欄へ連続して入力したいです。 (入力 → Tab → 入力 → Tab → 繰り返し… のような) エクセルシート A列    B列    C列    D列    E列      【りんご   みかん   もも】←セルの選択範囲 Webフォーム テキスト入力欄1[りんご] テキスト入力欄2[みかん] テキスト入力欄3[もも] Webフォーム上にはいくつものテキスト入力欄があり、点滅カーソルのある入力欄からペーストを開始したいです。 また、エクセルで参照するデータも何種類もあり数が変動しますので、決まったセル範囲ではなく、その都度アクティブセルを指定したいです。(行は1行です。) 以上のようなことはマクロで可能でしょうか? マクロに詳しくないので、実現可能なコードを教えていただけると、大変助かります。 どなたかお詳しい方、よろしくお願い致します。

  • 入力フォームの値の盗み見、https について

    会社のウェブサイトに、お問い合わせページを追加しようとしています。 入力フォームに社名、連絡先、問い合わせ内容を入力して[送信]ボタンを押すという、 よく見かける形式のものです。 しかし、この場合、なんの工夫もしないで <FORM action="mailto:~">と<INPUT type="submit"> のようなことをすると、入力値を盗み見られる可能性があるのではと危惧します。 実際、信頼のできるサイトを見ると、こういった入力フォームを用いる場合、 https を使っているところが多いように思います。 そこで質問ですが、https利用等の工夫しない場合、 盗み見られることはあるのでしょうか? 盗み見られるメカニズム(?)について簡単に教えてもらえませんでしょうか? また、https はどのようにすれば利用できるのでしょう。 会社が契約しているレンタルサーバーサービスが対応しているかどうか? https を利用することで費用負担がある? 等。 社内のウェブ管理担当をしているのですが、 私を含めみんなウェブに関しては素人です。 ご教授よろしくお願いします。

    • ベストアンサー
    • CSS
  • フォームに入力しているのにはじかれてしまう

    詳細がわからないのですが、 あるWebでフォームに住所や氏名などを入力して、送信ボタンで内容を送るページを作成しています。 たまに、全ての項目に入力しているのに例えば「住所がブランクです。入力してください」というMsgではじかれてしまうという問い合わせがあります。 よく、「Cookieを有効にしてください」とか「JavaScriptがどうのこうの」ということが書いてあるフォームもありますが、本当の所原因は何でしょうか。 例えばブラウザはIEでしか使用できない、や他に原因があるのでしょうか。 よろしくお願いします。初心者です。

    • ベストアンサー
    • CGI
  • firefox フォームにフォーカス

    ページ内の上の方にフォームが一つ付いているページを10タブ開いているのですが、そのフォームにctrl+cで次々と貼り付けをしたいとおもっています。 アドオンでF3キーで次のタブへいけるようにしてあるのですが、次のタブへ行くとフォーカスがどこかへいってしまい、tabキーを7回押すと ページ内のフォームにフォーカスになります。これをショートカットキーか何かで一発でやりたいのですが、可能でしょうか?

  • Excelのコントロールツールボックスでデータの入力フォームを作成しま

    Excelのコントロールツールボックスでデータの入力フォームを作成しました。内、何項目かはテキストボックスになっているのですが、これを特定の順番でTabキーかEnterキーで移動させたいのですができません。方法をご存知の方がいらっしゃれば教えてください。 VBAエディタからのフォーム作成ではプロパティでできていたのでExcel全般の仕様だと思っていたのですが・・・。

専門家に質問してみよう