- ベストアンサー
カーソルが自動的に移動する方法
HTML・JSPでHPを作っているのですが4つのテキストボックスがあるとします。そこには1文字しか入力できないようになっていて1文字入力すると自動的につぎのテキストボックスにカーソルを移動させたいのですがどうしたらいいのでしょう？ イメージ的にはTABキーを押した感じなのですがそのTABを押さなくても入力した瞬間に次のテキストボックスに入力できるようにしたいのです。 よろしくお願いします。
- jun2249
- お礼率33% (47/139)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでどうでしょうか？ <html> <head> <title>入力時フォーカス移動</title> <script language="JavaScript"> <!-- function moveFocus(name,to){ if(document.all[name].value.length == 1){ document.all["Txt_Input"+to].focus(); } } // --> </script> </head> <body> <form name="form1"> <input type="text" name="Txt_Input1" maxlength="1" onKeyUp="moveFocus(this.name,'2')"> <input type="text" name="Txt_Input2" maxlength="1" onKeyUp="moveFocus(this.name,'3')"> <input type="text" name="Txt_Input3" maxlength="1" onKeyUp="moveFocus(this.name,'4')"> <input type="text" name="Txt_Input4" maxlength="1"> </form> </body> </html>
その他の回答 (1)
- Sam_A
- ベストアンサー率33% (6/18)
フォームのフォーカスを指定するのは下のソースで行けるはずですので、お試しください。あとは入力した事を判定する処理を入れれば可能だと思います。 ----------------------------------------------- <HTML> <HEAD> <TITLE>Focus_Sample</TITLE> </HEAD> <BODY> <DIV ALIGN="center"> <H3>A2の入力フォームにカーソルを合わせます。</H1> </DIV> <P> <FORM NAME="myFORM"> <INPUT TYPE="text" NAME="A1"> <INPUT TYPE="text" NAME="A2"> <INPUT TYPE="text" NAME="A3"> </FORM> <SCRIPT Language="JavaScript"> <!-- document.myFORM.A2.focus(); // --> </SCRIPT> </BODY></HTML>
補足
ありがとうございます。 教えていただいたようにやってみたのですがうまく動きませんでした。 判断文がおかしいのでしょうか？ 判断文は下記のようにないたのですが・・・ <SCRIPT Language="JavaScript"> <!-- document.test.data1.focus(); if(data1!=NULL){ document.test.data2.focus(); } if(data2!=NULL){ document.test.data3.focus(); } if(data3!=NULL){ document.test.data4.focus(); } --> </SCRIPT>
お礼
ありがとうございます。 出来ました！！