テキストボックスのフォーカス移動

このQ&Aのポイント
  • 既定の桁数を入力したら次のinputにフォーカスを移動させたい
  • 同じname属性を与えればその範囲内で簡単にフォーカスを移動させられる方法はあるか
  • スクリプトの再利用ができるようにしたい
回答を見る
  • ベストアンサー

テキストボックスのフォーカス移動

こんにちは。 htmlページで<input type="text"/>に既定の桁数を入力したら次のinputにフォーカスを 移動させたいと考えています。 下の例の場合、1番目のテキストボックスに既定の桁数5ケタを入力したら、フォーカス を2番目のテキストボックスに移動させ、2番目のテキストボックスに4ケタ入力したら 3番目のテキストボックスにフォーカスを移動させるようにしたいと思っています。 スクリプトの再利用ができるよう、たとえば同じname属性を与えればその範囲内で 簡単にフォーカスを移動させられるようなものにしたいと思うのですが、うまくいきません。 何か良い書き方はありませんでしょうか? <div>  <input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>  <input type="text" name="hoge" maxlength="4" onkeyup="test(this)"/>  <input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/>  <input type="text" name="hoge" maxlength="2" onkeyup="test(this)"/> </div>  ・  ・ <script type="text/javascript"> function test(elm) {  if (elm.value.length >= elm.maxLength) {   /*(気持ちとしては、ここにこのような感じのことを書きたいのですが・・・)     var arr_elm = document.getElementsByName(elm.name);     var n = elm.index + 1     arr_elm[n].focus();   */   } } </script>

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

最後までいったらどうするのでしょう? <script> function test(elm) { var n=elm.form.elements[elm.name]; if (elm.value.length >= elm.maxLength) { for(var i=0;i<n.length;i++){ if(n[i]==elm){ if(n[i+1]) n[i+1].focus(); } } } } </script> <form> <div> <input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/> <input type="text" name="fuga" maxlength="4" onkeyup="test(this)"/> <input type="text" name="hoge" maxlength="4" onkeyup="test(this)"/> <input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/> <input type="text" name="hoge" maxlength="2" onkeyup="test(this)"/> <input type="text" name="fuga" maxlength="3" onkeyup="test(this)"/> </div> </form>

puyo28
質問者

お礼

お礼遅くなりましてすみません。 ありがとうございました。 if(n[i]==elm){ という評価が動作するんですね。 おかげで助かりました。 最後までいったら別な関数を呼び出して入力チェックし、 別な処理コードへ入力結果を投げるつもりです。 その後、focus(またはselect)で最初に戻るかどうかは、 全体の使いやすさを見ながら決めようと思っています。 ありがとうございました。

その他の回答 (2)

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.3

こんにちは。 すみません、一応ソースを載せておきます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【OKWave回答サンプル集】テキストボックスのフォーカス移動</title> <link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" /> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('input.automove').each ( function(index) { $(this).keyup ( function(event) { if ( $(this).val().length >= $(this).attr('maxlength') ) { $(this).next().focus().select(); } }).width($(this).attr('maxlength')*8); }); }); </script> <style type="text/css"> .automove { border: solid 1px #666; } </style> </head> <body> <h1>テキストボックスのフォーカス移動(q7533730)</h1> <form id="form-test1"> <input type="text" name="hoge" maxlength="5" class="automove" />&nbsp;- <input type="text" name="hoge" maxlength="4" class="automove" />&nbsp;- <input type="text" name="hoge" maxlength="5" class="automove" />&nbsp;- <input type="text" name="hoge" maxlength="2" class="automove" /> </form> <form id="form-test2"> <input type="text" name="hoge" maxlength="2" class="automove" />&nbsp;- <input type="text" name="hoge" maxlength="3" class="automove" />&nbsp;- <input type="text" name="hoge" maxlength="4" class="automove" />&nbsp;- <input type="text" name="hoge" maxlength="5" class="automove" /> </form> </body> </html> <!-- q7533730 -->

puyo28
質問者

お礼

ご回答ありがとうございます。 jQueryについては全くの勉強不足・・といいますか、 正直言いまして未知の世界です。 いただいたソースファイルは、まさに期待通りの 動きをしてくれました。 参考にさせていただきたいと思います。 ありがとうございます。感謝いたします。

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 jQueryを利用して作ってみました。 (jQueryを利用できない、利用したくないという状況であればすみません) ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7533730/ class="automove"を与えたinputに対してmaxlengthを取得して文字数と判定して次のオブジェクトに対してフォーカスを当てています。 tabキーで遷移時の処理は省いていますのでそのへんはうまく実装してみてください。

関連するQ&A

  • Enterで指定のテキストボックスにフォーカスを・・・

    Enterを押すと指定のテキストボックスにフォーカスを移動させたいのですがやり方がわかりません・・・。 例えば以下の様なフォームで TB1→TB2→TB3→TB5→TB6 という具合に移動させたいです。 どうか皆さんのお知恵をお貸しください。 <form name = "textbox"> <input type = "text" name="TB0" onFocus="this.blur()"> <input type = "text" name="TB1"> <input type = "text" name="TB2"> <input type = "text" name="TB3"><br> <input type = "text" name="TB4"onFocus="this.blur()"> <input type = "text" name="TB5"> <input type = "text" name="TB6"> </form>

  • input textでペーストした瞬間フォーカス移動

    input type="textが縦にたくさんあり、 text1[n番目]に文字をペーストするのですが ペーストした瞬間フォーカスをtext1[n]からtext1[n+1]に移動したいのですがonChangeだとうまくペーストした瞬間に移動できません。 良い方法はあるでしょうか。 <input type="text" size="21" value="" name="text1"><br> <input type="text" size="21" value="" name="text1"><br> ・ ・ ・

  • ボタンを押すとテキストボックスが増えるJavaScriptについて教えてください

    Javascriptで質問です。 <input type="text" name="hoge1" value=""> <input type="text" name="hoge2" value=""> <input type="text" name="hoge3" value=""> というようなテキストボックスがあり、「追加」というボタンを押すと 新たなテキストボックス <input type="text" name="hoge4" value=""> が追加されるようなJavascriptを作成したいと考えています。 新たに作られたテキストボックスには name="hoge4" name="hoge5" ・ ・ ・ というように、nameの部分に「hogeの右にある番号に1ずつ加算された名前」を付けていきたいのです。 検索すると、テキストボックスを追加していくだけのサンプルはいくつかあったのですが、nameの部分を加算していく、という例が無くて行き詰っています。 よろしくお願いいたします。

  • 複数のテキストボックスでインデックスを取得する方法

    htmlでテキストボックスを複数作り、そのうちの一つの テキストボックスをクリックすると、Javascriptで そのテキストボックスのインデックスを取得したい思います。 ソースは簡単ですが、以下の通りです。 サンプルとして5つテキストボックスを作成していますが、 実際は不特定(データの読み込み件数)です。 onclick="hoge(???);" の???の部分に、テキストボックスのインデックスを書きたいのですが。。。 リストボックスだと、selectedIndexで取得できるようなのですが、 テキストボックスはどのような関数を使えばいいですか? <html> <head>   <script language="javascript">     function hoge(index){     alert(index);   }   </script> </head> <body>   <input type="text" name="hoge" onclick="hoge(???);"><br>   <input type="text" name="hoge" onclick="hoge(???);"><br>   <input type="text" name="hoge" onclick="hoge(???);"><br>   <input type="text" name="hoge" onclick="hoge(???);"><br>   <input type="text" name="hoge" onclick="hoge(???);"><br> </body> </html>

  • フォーカスの移動

    どうしてもわからないので、教えて下さい。 下の option ボタンのいずれかを選択した際に、 自動的にテキストボックスにフォーカスが移るような スクリプトを書きたいのですが、 スクリプトの内容と、htmlにへの組み込み方を どのように実装してよいかわかりません。 ------------------------------------- <html> <title></title> <head> <script language="JavaScript"> //フォカース移動 function moveFocus() { //???? } </script> </head> <body> <form name="myForm"> <select name="mySelect"> <option name="op1">test1</option> <option name="op2">test2</option> </select> <input type="text" name="myText"></input> </form> </body> </html>

  • textbox内の文字数を判別しfocusを移動させる

    textbox内の文字数を判別しfocusを移動させるプログラムを書いたのですが、2つ目のtextboxから記入したりするとうまく動作しません。どうしたらいいのでしょうか?カーソルがどのtextboxにあるか(どのtextboxにfocusしているか)を参照しようとしたのですがそのような関数はあるのでしょうか?教えてください。 <html> <head><title>checkLength</title> <script language="JavaScript"> <!-- document.onkeyup=checkLength; function checkLength() { if(document.form1.text1.value.length==3) document.form1.text2.focus(); if(document.form1.text2.value.length==5) document.form1.text3.focus(); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1">半角英数で入力してください。<br> 1...<input type="text" name="text1" size="7"> 3文字入力するとカーソル移動<br> 2...<input type="text" name="text2" size="7"> 5文字入力するとカーソル移動<br> 3...<input type="text" name="text3" size="7"> </form> </body> </html>

  • focus()が上手くいかない

    困っています、助けてください。 フォームのテキストボックスの入力された文字数をチェックし、 サイズオーバーなら、アラートを表示し、テキストボックスにフォーカスを移動させたい。 のですが、上手く動いてくれません。 コードは次の通りです。どこがおかしいのか?どうすれば改善できるのか? 教えてください。 <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> </form> <script type="text/javascript"> <!-- function checkText(aText) { if (aText.value.length > 100) { alert('サイズオーバーです'); aText.focus(); } } //--> </script>

  • テキストボックスをEnterキーで移動する際のビープ音

    あるテキストボックスでEnterキーを押すと、次のテキストボックスに移動する スクリプトを組んだのですが、動作はしますが必ず「ブー」というビープ音が 鳴ってしまいます。 たぶん、改行できないテキストボックス内でEnterキーを押すことで、「ダメだよー」 っという警告だと思うのですが、どうにかして消すことはできないのでしょうか? どのような些細なことでも構いませんので、ご教授願います! ~Java Script~ function Change(){ if(event.keyCode==13) document.form.name2.focus(); } ~HTML~ <FORM NAME="form"> <INPUT TYPE="text" NAME="name1" onKeyDown="Change()"> <INPUT TYPE="text" NAME="name2"> </FORM>

  • テキストボックスが何番目かを検出したい

    <FORM> <INPUT type="text" name="S1"> <INPUT type="text" name="S2"> <INPUT type="text" name="S3"> <INPUT type="text" name="S4"> <INPUT type="text" name="S5"> </FORM> 上記ソースでオンフォーカスのテキストボックスが何番目かを検出したいのですがJavaScriptで可能でしょうか?

  • テキストボックスに関して質問です

    ページ間でのテキストボックスからテキストボックスへの文章の移行って可能でしょうか? tezt1.htmlってページにある 名前⇒<INPUT TYPE="text" NAME="name1"> 住所⇒<INPUT TYPE="text" NAME="adres1"> のテキストボックスに入力された文章を 入力ボタン <INPUT type="button" value="入力" onClick="・・・・・"> を押すと、下に用意してあるテキストボックス(別ページ)に入力した値が入るようにしたいのです。 tezt2.htmlの 名前⇒<INPUT TYPE="text" NAME="name2"> 住所⇒<INPUT TYPE="text" NAME="adres2"> 事情が有り一つのページで行えません。 フレームわけしたページで移行して使用したいのですが… 質問し方が悪くて大変申し訳有りません。宜しくお願いします。

    • ベストアンサー
    • HTML