複数のテキストボックスでインデックスを取得する方法
- 複数のテキストボックスでインデックスを取得するための方法を紹介します。
- HTMLで複数のテキストボックスを作成し、クリックしたテキストボックスのインデックスをJavascriptで取得する方法について解説します。
- リストボックスの場合はselectedIndexを使えますが、テキストボックスのインデックスを取得する方法は別途実装する必要があります。
- ベストアンサー
複数のテキストボックスでインデックスを取得する方法
htmlでテキストボックスを複数作り、そのうちの一つの テキストボックスをクリックすると、Javascriptで そのテキストボックスのインデックスを取得したい思います。 ソースは簡単ですが、以下の通りです。 サンプルとして５つテキストボックスを作成していますが、 実際は不特定（データの読み込み件数）です。 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>
- puppy-rupin
- お礼率96% (25/26)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じではどうでしょう？ JavaScriptでテキストボックスを出すようにしてみました。 <html> <head> <script language="JavaScript"> function hogehoge(index){ alert(index); } </script> </head> <body> <form name="f"> <script language="JavaScript"> for(i=0;i<5;i++){ document.write('<input type="text" name="hoge" onClick="hogehoge(' + i +');"><br>'); } </script> </form> </body> </html>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
まず、indexはformの要素なので、formの入れ子に してください。 またオブジェクト名でhogeを使用しているので 関数名として使用するとエラーになります。 そもそもテキストボックスにインデックスがあると どなたにお聞きになりました？ またインデックスがあったとして利用価値がある のでしょうか・・・ とりあえずソース的にはこんな感じで抜き出せる と思います。オブジェクトを検索していき 合致するまで足していけば、インデックス値 らしきものは得ることができます。 <html> <head> <script language="javascript"> function hogeFunc(obj){ var f=obj.form; var index=-1; for(var i=0;i<f.length;i++){ if(f[i].type=="text") index++; if(f[i]==obj){ alert(index); return } } } </script> </head> <body> <form> <input type="text" name="hoge" onclick="hogeFunc(this);"><br> <input type="text" name="hoge" onclick="hogeFunc(this);"><br> <input type="text" name="hoge" onclick="hogeFunc(this);"><br> <input type="text" name="hoge" onclick="hogeFunc(this);"><br> <input type="text" name="hoge" onclick="hogeFunc(this);"><br> </form> </body> </html>
お礼
テキストボックスにインデックスがあるのかどうかは、誰にも聞いてなくて、 自分で勝手にあるもんだと思いこんでました。 存在しないんですね。。。 インデックスのようなものを取得して、クリックしたテキストボックス javascriptでそのテキストボックスにテキストを表示 させたい為、 そのクリックしたテキストボックスはどれなのか知る必要があったのです。 回答、どうもありがとうございました。
関連するQ&A
- ボタンを押したらテキストボックスの文字色をチェンジ
ボタンをクリックしたらテキストボックスに入っている文字色を黒から赤に変えたいんですがどのようにしたらいいでしょうか？ 一応、自分なりに作ってみたものです。エラーがでます。 保存ファイルの拡張子は「ｈｔｍｌ」です。 ------------------------------------------------------- <html> <head> <script language="javascript"> function change(){ document.form1.text1.fgcolor="red"; } </script> </head> <body> <input type="text" value="文字色" name="text1"> <input type="button" value="押す" onClick="change()"> </body> </html> ----------------------------------------------------------
- 締切済み
- JavaScript
- ボタンを押すとテキストボックスが増える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の部分を加算していく、という例が無くて行き詰っています。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テキストボックス 追加
最初5つのテキストボックスを表示して追加ボタンを押して、6個目から15個目を追加しようとしています。name="tb1" からname="tb15"までを設定したいです。15個になった際にボタンを押せなくしたいです。入力された情報をPHP側で処理しようとしています。 以下のソースを改良しようとしているのですが、うまくいきません。 どのようにしたらいいでしょうか？ <script language="JavaScript"> <!-- function add(){ document.all.AddArea.innerHTML = document.all.AddArea.innerHTML + "<br><input type=\"text\" name=\"Txt_Object\">"; } // --> </script> </head> <body> <form id="f1"> <div id="AddArea"> <input type="text" name="Txt_Object"> </div> <input type="button" value="追加" onClick="add()"> </form> </body> </html>
- ベストアンサー
- JavaScript
- テキストボックスの背景色について
<html> <body> <form name="form1"> <input type="text" value="よろしく" name="text1"> <script language="javascript"> document.form1.text1.style.background-color = "green"; </script> </form> </body> </html> これはテキストボックスの背景色をグリーンにするプログラムなんですがうまくいきません。どこが間違っているのか指摘してください。
- ベストアンサー
- 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
- JavaScript テキストボックス キーイベント
JavaScript テキストボックス キーイベント こんにちは。趣味でプログラミングをしている者です。 タイマーを使って計算ドリルを作ったのですが、 特定のキーコードで正解かどうか判定する関数を呼び出そうとしたのですが、 テキストボックスにこたえを入力して、キーを押すたびに 「キーン」というような音が鳴るのですが、 その音は、どのような仕組みで鳴るのでしょうか？ また、音を鳴らさないようにする方法がありましたら、 教えていただけないでしょうか よろしくお願いします <html> <head> <script type="text/javascript"> function init() { document.attachEvent("onkeypress", KotaeAwase); } function KotaeAwase() { if( event.keyCode == 13) { var key = 1; var kotae = parseInt( document.Form1.kotae.value ); var Result = document.Form1.result; if( kotae == key ) Result.value = "せいかいです!"; else Result.value = "ちがいます"; } } </script> </head> <body onLoad="init();"> <form name="Form1"> <input type="text" name="kotae" size="20"> <br><br> <input type="text" name="result" size="20"> <br> </form> </body> </html>
- ベストアンサー
- JavaScript
- 【FireFox】サブウィンドウ表示とテキストボックス値
メインのウィンドウにテキストボックスとボタンがあり、 ボタンをクリックするとjavascriptによりサブウィンドウ が開くHTMLがあります。 しかし、FireFoxに限り、ボタンを押してサブウィンドウ を開くとメインのHTMLのテキストボックスに入力していた 値が消えてしまいます。 ================ main.html ===================== <html> <head> <script Language="JavaScript"><!-- function openSubWin(){ window.open("sub.html","window","width=300,height=300"); } // --></script> </head> <body> <form action="#" name="myform"> <input type="text" name="no"> <button id="button1" onclick="openSubWin();" >サブウィンドウ</button> </form> </body> </html> ================== サブウィンドウ ================ <html> <body> サブウィンドウ </body> </html> IEでは問題ありませんでした。 何か解決方法はありますでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- 現在のカーソル行を知りたい。
'KeyDown'の下記サンプルコードでfunction msgにきたときに 何番目のテキストボックスでKYyDownされたか知りたいのですが、 関数があればお教え下さい。 <html> <head> <script type="text/Javascript"> <!-- function msg(str) { alert("check"); } //--> </script> </head> <body onKeyDown="msg('KeyDown')"> key<br> <form name="myForm" method="POST" target="_self"> <input type="text" name="text1><BR> <input type="text" name="text1"><BR> <input type="text" name="text1"><br> <input type="submit" name="button1" value="button"> </form> </body> </html>
- ベストアンサー
- JavaScript
- getElementsByNameの要素数が取得できません。(ソース付)
よろしくお願いします。 getElementsByNameを使って要素数を取得しようとしています。 しかし、tableタグの数が入っていません。 tableタグになる、nameは無効になるのでしょうか？ <html> <head> <title>document.getElementsByName - 指定nameのエレメント全取得</title> </head> <!--指定nameのエレメント全取得のサンプル--> <script type="text/javascript"> function getElements() { var elements = document.getElementsByName("test") alert(elements.length + "個の要素が見つかりました") } </script> </head> <body> <input name="test" type="text"><br> <table name="test"></table><br> <input name="test" type="text"><br> <button onclick="getElements()">getElementsByName('test')</button> </html>
- 締切済み
- XML
- テキストボックスに文字飾り表示（２の３乗）が出来ない。
テキストボックスに文字飾り表示（２の３乗）が出来ない。 JavaScriptを使用しテキストボックスに上付き、下付き文字を表示したいのですが上手く表示しません。HTMLのコードが出てしまいます。下記簡単なコードを添付しますので、何方か正しい表示方法を教えてください。 参考までにコード中(1)は正しく表示できず（テキストボックス中）、(2)は正しく表示します。（非テキストボックス） <HTML> <HEAD> <SCRIPT language="JavaScript"> function disp(){ var c=new Array("2"+"3".sup(),"1","2"); document.tm.a1.value=c[0]; // (1) document.write(c[0]); // (2) } </SCRIPT> </HEAD> <body> <FORM name="tm"> <INPUT type="button" value="" onClick="disp()"> <INPUT name="a1" type="text" size="20" width="10"> </FORM> </body> </HTML>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 テキストボックスは、htmlではなくxmlで出力させてるのですが、 この回答はものすごく参考になりました。 xmlでテキストボックスを出力させているところを、 回答のようにonClickのところで変数を埋め込むだ関数を設定します。 まだまだ頭固いですね。。。<自分 言葉通り、目から鱗が落ちました。 回答ありがとうございました。 本当に助かりました。