• ベストアンサー

フォーカスする際のテキストフィールド名を変数で渡したい

表のような入力フォームがあって、submitした際にあるプログラムが走り、HTML本体を再読み込みしています。 画面が表示されたときに、テキストフィールドにあらかじめフォーカスを合わせるには、以下のOnloadとfocus()を使いますよね？ <body onLoad="document.Form.Field.focus()"> で、再読み込み時には、次の入力用テキストフィールドへフォーカスを合わせたいのですが、どうすればいいでしょうか？ 例えば A1 A2 A3 というとき、A1を入力後、後ろでプログラムが走り、再読み込みして画面が再表示されたときに、A2にフォーカスがうつっている、という感じです。通常の書き方だとBodyにはひとつか(A1しか)かけないので・・・変数を使ったらどうかと思ってやってみましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!-- var f; f = "A1"; window.alert(f); //--> </SCRIPT> <body onLoad="document.Form.(f).focus()"> 又は <body onLoad="document.Form.var(f).focus()"> <body onLoad="document.Form.f.focus()"> フィールドにindextabをしてみましたがダメでした。又A1にonBlurが入っております。 そもそも変数なんて使えるのでしょうか？ 変数以外の方法でも、他にアイディアがあればお願いします。 締切りが明日で非常にあせっています。 よろしくお願いいたします。

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

  • ベストアンサー
  • togino
  • ベストアンサー率75% (97/129)
回答No.1

お急ぎのようなので、１例を <?php 　// フォーカスを当てたいフィールド名を設定 　$focus_name = "A1"; ?> <body onLoad="document.Form.<?php echo $focus_name ?>.focus()">

sos000
質問者

お礼

お答えをありがとうございました。

sos000
質問者

補足

昨日は大変お世話になりました。 こちらの文中途中でも、<?php>と記入できるのですね...勉強になりました。今後ともよろしくお願いいたします。

その他の回答 (1)

  • coral0
  • ベストアンサー率92% (13/14)
回答No.2

一つPHP例を挙げて下さっている方がいますので、私はJavaScriptでの例を挙げたいと思います。 （こちらは内容が複雑なので、下の方のPHP例が良いかと思いますが、念のためJavaScript例を書いておきます） 以下の例では、アドレス欄に記述されたパラメータ名"F"を取得し、そのパラメータの値に対応する場所にフォーカスが移ります(IE+Netscape対応) （処理が複雑ですみません＾＾；） <HTML> <HEAD> <SCRIPT> // パラメータを取得 function getParameter( param ) { var k; var params = new Array(); var args = document.location.search; if( navigator.appName.indexOf("Microsoft") >= 0 ) args = unescape(args); if( args.length > 0 ) { args = args.substring(1, args.length); params = args.split("&"); for(k = 0; k < params.length; k++ ) { if(params[k].substring(0, params[k].indexOf("=")) == param) { return params[k].substring(params[k].indexOf("=") + 1, params[k].length); } } } return null; } // パラメータで渡された場所へフォーカスを移す function form1SetFocus() { var index; index = Math.abs(getParameter("F")); if(!index) index = 1; document.form1.elements[index].focus(); for(index = index + 1; index < document.form1.length; index++) { document.form1.F.value = index; if(document.form1.elements[index].type.toUpperCase() == "TEXT") break; } } </SCRIPT> </HEAD> <BODY onLoad="form1SetFocus()"> <FORM NAME="form1"> <INPUT TYPE="HIDDEN" NAME="F" VALUE=1> <INPUT TYPE="TEXT" VALUE=""><BR> <INPUT TYPE="TEXT" VALUE=""><BR> <INPUT TYPE="SUBMIT" VALUE="Submit"> </FORM> </BODY> </HTML>

sos000
質問者

お礼

お答えをありがとうございました。 JavaScriptのソースも書いていただきありがとうございます。 elements[]としてみましたら、うまくいきました。 まだまだ勉強中ですので今後ともよろしくお願いいたします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • テキストエリアをenterキーでフォーカス移動したい

    複数あるテキストエリア間を、enterキーでフォーカス移動をしたいです。 以下のようにしましたが、２つめのテキストエリアへフォーカス移動すると、改行が入力され、カーソルが２行目へ移動してしまいます。 enterキーを押しているのでこうなってしまうと思うのですが、 カーソルが１行目へ移動するようにするには、どうしたらいいでしょうか？ フォーカス移動後に改行コードがあったら、""にreplaceする・・等、試してみたのですが、なかなか上手くいきません。 どなたかお分かりになる方がいらっしゃったら、教えてください。 <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function FirstFocus() { document.forms.F1.elements[0].focus(); } function nextFocus(n) { if (event.keyCode == 13) { for (var i = 0, f = n.form.elements; i < f.length; i++) { if (f[i] == n) { (f[i + 1] || f[0]).focus(); } } } } //--> </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>

  • テキストボックスへの引数によるフォーカスの設定

    こんにちは。 ASP.NET(VB)でサイトを作っています。 ページを表示した時にテキストボックスにフォーカスを設定したいと思っています。 ネットなどで検索していましたら<body onLoad="document.Form.textbox.focus()"> とすれば出来るようなので、実際に設定してみましたら、「'document.form.LoginID'はNullまたはオブジェクトではありません」というエラーが出てしまいます。 どうすればASPのコントロールにフォーカスを設定できますか？

  • 変更のかかったテキストフィールドに再度フォーカスを設定するには？

    お世話になります。 テキストフィールドを複数用意し、 １つのフォームに対して変更が掛かった時にフィールド名をアラートで表示し、 再びフォーカスを変更したテキストフィールドに戻すソースを組みたいと考えています。 （結果、ループのような形になりますが、、、例として捕らえてください。。） 下記のソースを組んだのですが、？の部分の指定がうまくいかず、苦戦しております。 上記のことを行うには、？の部分をどう記述すべきかご教示いただけませんでしょうか。 皆様のお力を御貸しください。どうぞよろしくお願い致します。 <script type="text/javascript" > function fnc_OnChangeFields(Fieldname,Fieldvalue){ with(document.f1){ alert(Fieldname); ?????????.focus(); } } </script> <body> <form method="post" name="f1"> <tr> <td> \<input TYPE="text" NAME="field1" onchange="return fnc_OnChangeFields(this.name,this.value)"></td> <td> \<input TYPE="text" NAME="field2" onchange="return fnc_OnChangeFields(this.name,this.value)"></td> <td> \<input TYPE="text" NAME="field3" onchange="return fnc_OnChangeFields(this.name,this.value)"></td> </tr> </body>

  • テキストフィールドへの値の表示

    JavaScript初心者です。現在、言語習得のためのドリルをおこなっておりますが、２つのテキストフィールド間での値の受け渡しがうまくいきません。具体的には、上下２つのテキストフィールドがあり、上のフィールド（摂氏）に数値を入れボタンを押したタイミングで、その値を華氏に変換して下のフィールドに結果の値が表示される、またその逆もあり、というプログラムを作成したいのです。 テキストフィールドのvalueに値を格納すればよいのかと思い、いろいろな箇所で値を格納してみたのですが、うまく動きません。アドバイスをよろしくお願いいたします。 <html> <head> <script type="text/javascript"> var cel; var fah; function cel_to_fah( ) { cel=document.getElementById("c").value; fah=(9 * cel / 5) + 32 //document.write(fah); document.input_fah.c.value=fah; //return fah; } function fah_to_cel(){ fah= document.getElementById("f").value; cel= 5 * (fah - 32) / 9; //document.write(cel); document.input_cel.f.value=cel; //return cel; } </script> </head> <body> <form id="input_fah" action="./hw06-3.html" > Celsius: <input type="text" id="c" size="20" > <input type="button" onclick="cel_to_fah()" value="To Fahrenheit"/><br/><br/> </form> /* <script language="JavaScript"> document.input_fah.c.value=cel_to_fah(); </script> */ <form id="input_cel" action="./hw06-3.html" > Fahrenheir: <input type="text" id="f" size="20"> <input type="button" onclick="fah_to_cel()" value="To Celsius" /><br/><br/> </form> /* <script language="JavaScript"> document.input_cel.f.value=fah_to_cel( ) </script> */ </body> </html>

  • body onload 自動フォーカス

    body onload 自動フォーカス お世話になっております。 PHP・・・ちょっとは分かる JavaScript・・・ほとんど素人 という程度の知識の者です。すみません。 次ページのテキストに自動フォーカスをするプログラムを構築しております。 諸々調べた結果、以下のコードで実行テストは成功しました。 <html> <head> </head> <body onLoad="document.form1.field1.focus()"> <form action="#" name="form1"> <p>パスワード：<input type="password" name="field1" size="25"></p> </form> </body> </html> 以下２点ご質問がございます。 １） name属性についてですが、本番プログラムでは、 name="aaa-bbb-ccc" というように、「-」が入っております。 そうすると、フォーカスの実行は失敗してしまします。 nameに「-」なしの名前をつければ問題ないのですが、 他のプログラムでも使用している名前の為、変更せずに構築することができればと考えております。 何かよい方法はございませんでしょうか。 ２） 次ページに遷移した時に、テキストにフォーカスを当てるのと同時、 そのテキスト位置までスクロールすることは可能でしょうか。 同じく、<body onload=location.href='#aaa'>という形で、指定idの場所にスクロールすることはできましたが、 上記１）と組み合わせることができればと思います。 長々すみません。 要約すると、「次ページ遷移時にあるテキストをフォーカスしその場所までスクロールする」 ことが目的です。 何卒宜しくお願い申し上げます。

    • ベストアンサー
    • HTML
  • 複数のテキストフィールドを同時に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>

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

    textbox内の文字数を判別しfocusを移動させるプログラムを書いたのですが、２つ目の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>

  • フォーム内のテキストフィールドにアドレスを入力後、Enterキーを入力して移動したい

    フォーム内のテキストフィールドにアドレスを入力後、Enterキーを入力して 移動するにはどうすればよいのでしょうか？ 以下のようなコードを作成したのですがうまくいきませんでした。 <html> <head> <script type="text/javascript"> function jumpURL() { url = document.f.t.value; location.href = url; } </script> </head> <body> <form name="f" onSubmit="jumpURL()"> <input type="text" name="t" id="t"> </form> </body> </html> ご存知の方がおられましたらご回答をよろしくお願いします。

  • Safari3にて、新しく開いたウィンドウの入力フォームにフォーカスが合いません

    はじめまして。 javascriptでフォームにフォーカスを当てる処理として、下記のfocusTextファンクションをonloadで呼び出しています。 function focusText(){ document.getElementById("toFocus").focus(); } しかし、Safari3.2.2の場合、対象のHTMLを　target="_blank"　にて開いた場合にフォーカスが合ってくれません。 window.opener.blur(); を挟んでもうまく行きませんでした。 Safari4や、Interner Explorer、Google Chrome、Firefox等ではうまく行っています。 OSはWindows Vistaです。 解決策をおわかりの方、ご教授いただければ幸いです。 サンプルのソースを下記に記述します。 宜しくお願い致します。 == base.html == <html> <head></head> <body> <a href="new.html" target="_self">自身のウィンドウ</a><br> <a href="new.html" target="_blank">新しいウィンドウ</a> </body> </html> == new.html == <html> <head> <script type="text/javascript"> function focusText(){ document.getElementById("toFocus").focus(); } </script> </head> <body onload="focusText();"> <form> <input type="text" id="toFocus"> </form> </body> </html>

  • フォーカスが外れたときの動作について

    お世話になります。 あるテキストフィールド(text1)をクリックした際に隠れている別のテキストフィールド(text2)を表示し、 フォーカスが外れるとtext2を再度隠すというコードを書きました。 <html> <head> <style> <!-- #text2 { display: none; } --> </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function() { $("#text1").click(function() { $("#text2").show(); }).blur(function() { $("#text2").hide(); }); }); --> </script> </head> <body> <form> <input type="text" id="text1" value=""/> <input type="text" id="text2" value=""/> </form> </body> </html> この場合、text1をクリックしたときにtext2が表示されて、フォーカスが外れるとtext2が隠れるのは想定通りの動作なのですが、これをtext2をクリックした場合にはtext1からフォーカスが外れてもtext2を表示したままということはできるのでしょうか。 blurの中でtext2がクリックされた時みたいな検知ができれば実現できると思うのですがそのようなことってできますでしょうか。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する