textbox内の文字数を判別しfocusを移動させるプログラムの作成方法

2023/07/26 20:30

このQ&Aのポイント

カーソルがどのtextboxにあるか(どのtextboxにfocusしているか)を参照する方法が分からないため、うまく動作しない問題が発生しています。
textbox内の文字数を判別し、特定の文字数に達した場合にカーソルを別のtextboxに移動させるプログラムを作成したいです。
htmlのフォーム要素でカーソルの位置を取得する方法を教えてください。

ベストアンサー

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

2002/06/14 03:20

textbox内の文字数を判別しfocusを移動させるプログラムを書いたのですが、２つ目のtextboxから記入したりするとうまく動作しません。どうしたらいいのでしょうか？カーソルがどのtextboxにあるか(どのtextboxにfocusしているか)を参照しようとしたのですがそのような関数はあるのでしょうか？教えてください。 <html> <head><title>checkLength</title> <script language="JavaScript">  </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>

shu1ngsk
お礼率23% (103/439)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

peso
ベストアンサー率41% (40/97)

2002/06/14 09:14 回答No.1

＞２つ目のtextboxから記入したりするとうまく動作しません。２つ目から始めると、１つ目に移動しないということでしょうか？ focus がどこにあるかは <INPUT ・・・ onFocus="・・・"> のようにするとわかるのですが、もっと間単に document.onkeyup = checkLength; ではなく、 1...<input type="text" name="text1" size="7" onKeyUp="checkLength(1)"> 2...<input type="text" name="text1" size="7" onKeyUp="checkLength(2)"> 3...<input type="text" name="text1" size="7" onKeyUp="checkLength(3)"> のようにして checkLength を function checkLength(FocusText){ switch (FocusText){ case 1 : // １つ目のテキストボックスに forcus があるときの処理　　　　　　　　　・　　　　　　　　　・　　　　　　　　　・ break; case 2 : // ２つ目のテキストボックスに forcus があるときの処理　　　　　　　　　・　　　　　　　　　・　　　　　　　　　・ break; case 3 : // ３つ目のテキストボックスに forcus があるときの処理　　　　　　　　　・　　　　　　　　　・　　　　　　　　　・ break; } のようにしてみてはどうでしょうか？

関連するQ&A

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
focus()が上手くいかない
困っています、助けてください。フォームのテキストボックスの入力された文字数をチェックし、サイズオーバーなら、アラートを表示し、テキストボックスにフォーカスを移動させたい。のですが、上手く動いてくれません。コードは次の通りです。どこがおかしいのか？どうすれば改善できるのか？　教えてください。 <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> </form> <script type="text/javascript">  </script>
- ベストアンサー
- JavaScript
テキストボックスのフォーカス移動
こんにちは。 htmlページで<input type="text"/>に既定の桁数を入力したら次のinputにフォーカスを移動させたいと考えています。下の例の場合、１番目のテキストボックスに既定の桁数5ケタを入力したら、フォーカスを２番目のテキストボックスに移動させ、２番目のテキストボックスに4ケタ入力したら３番目のテキストボックスにフォーカスを移動させるようにしたいと思っています。スクリプトの再利用ができるよう、たとえば同じ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>
- ベストアンサー
- JavaScript
FireFoxでfocus()が上手く動かない
javascriptを使って、フォームのテキストエリアの入力文字数をチェックし、オーバーしていれば、アラートを出し、テキストエリアにフォーカスを移動させる。ようにしようとしています。 IEでは動いてのですが、FireFoxだと上手くフォーカスが移動してくれません。どこがまずいのか、教えてください。コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript">  </script> </head> <body> <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> <input type="text" name="dummy"> </form> </body> </html>
- ベストアンサー
- JavaScript
textbox間の結合時、空白の時は、スペースを省きたい
<script type="text/javascript">  </script> <form name="f"> キーワードを入力：<br> <input type="text" size="55" name="t1"><br> <input type="text" size="55" name="t2"><br> <input type="text" size="55" name="t3"><br> <input type="text" size="55" name="t4"><br> <input type="text" size="55" name="t5"><br> <input type="button" name="connect" value="結合" onClick="ketugou()"><br> 結合時の内容を表示：<br> <input type="txt" name="q" size="55" maxlength="255" ><br> </form> で、空白のテキストボックスの場合は、スペース（" "）なしで、結合させたいんですが、どうしたら、良いのでしょうか？
- ベストアンサー
- JavaScript
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>
- ベストアンサー
- JavaScript
テキストエリアをenterキーでフォーカス移動したい
複数あるテキストエリア間を、enterキーでフォーカス移動をしたいです。以下のようにしましたが、２つめのテキストエリアへフォーカス移動すると、改行が入力され、カーソルが２行目へ移動してしまいます。 enterキーを押しているのでこうなってしまうと思うのですが、カーソルが１行目へ移動するようにするには、どうしたらいいでしょうか？フォーカス移動後に改行コードがあったら、""にreplaceする・・等、試してみたのですが、なかなか上手くいきません。どなたかお分かりになる方がいらっしゃったら、教えてください。 <HTML> <HEAD> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY onload="FirstFocus()"> <FORM name="F1"> <TEXTAREA name="T1" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T2" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T3" rows="5" cols="30"></TEXTAREA><BR> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
javascriptのtextbox
こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、上手くいきません。どうすればいいのでしょうか。また、変数を使わずに直接テキストボックスの中身を表示させる事はできるのでしょうか。教えてください。
- ベストアンサー
- その他（インターネット・Webサービス）
複数のテキストフィールドを同時にfocusする
ブラウザの仕様から考えてもダメもとですが。。。 JavaScriptで1ページに複数あるテキストフィールドを同時にfocusまたは入力値を選択状態する方法はありませんか？JavaScript以外でも構いません。ちなみに、テキストフィールドのname属性が同じ場合です。【例】 <form name="form1"> <input type="text" name="qqq" size="30"> </form> <form name="form2"> <input type="text" name="qqq" size="30"> </form>
- 締切済み
- JavaScript
ボタンクリックでフォーカス移動
JavaScript超ビギナーなので方法がよくわかりません。フォームにテキストボックス（配列）４個ありボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </form>
- ベストアンサー
- JavaScript