- ベストアンサー
複数のテキストボックスでインデックスを取得する方法
- 複数のテキストボックスでインデックスを取得するための方法を紹介します。
- HTMLで複数のテキストボックスを作成し、クリックしたテキストボックスのインデックスをJavascriptで取得する方法について解説します。
- リストボックスの場合はselectedIndexを使えますが、テキストボックスのインデックスを取得する方法は別途実装する必要があります。
- 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でそのテキストボックスにテキストを表示 させたい為、 そのクリックしたテキストボックスはどれなのか知る必要があったのです。 回答、どうもありがとうございました。
お礼
回答ありがとうございます。 テキストボックスは、htmlではなくxmlで出力させてるのですが、 この回答はものすごく参考になりました。 xmlでテキストボックスを出力させているところを、 回答のようにonClickのところで変数を埋め込むだ関数を設定します。 まだまだ頭固いですね。。。<自分 言葉通り、目から鱗が落ちました。 回答ありがとうございました。 本当に助かりました。