JavaScriptでフォームへのフォーカス処理
- JavaScriptを使用してフォームの特定のテキストエリアにフォーカスを当てる方法についての質問です。
- フォームのname属性を使用して、テキストエリアにフォーカスを当てる方法についてアドバイスを受けたいです。
- フォーカス機能が正常に動作しない理由と、hiddenタグを使用したままフォーカス機能を実装する方法について教えてください。
- ベストアンサー
JavaScriptでフォームへのフォーカス処理
PHP、XHTML、CSSで応募フォームの作成をしております。 PHPとHTMLは別ファイルで作成しており、PHPにアクセスしてそのPHPが指定されたテンプレートを読みにいくような流れとなっております。 HTMLもPHPも完成して、応募フォームとして一通り動くようになったのですが、新たにフォーカス機能を追加したいということになりました。 具体的には、応募フォームの一番最初のテキストエリアに、ページ読み込み時にフォーカスを当てたいという内容です。 そこで、フォーカス機能用のJavaScriptを別ファイルで新たに作成し、動きを確認してみたところ上手く動きません。 HTMLとJavaScriptのソースは下記の通りです。 ==================================================================== ■HTML(全て書くと長くなってしまうので、簡略させていただきます) <script type="text/javascript" src="$path_top_js/focus.js"></script> <body onLoad="Focus()"> </head> <form name="top" action="index.php" method="POST" onReset="return false;" onSubmit="return false;"> <input type="hidden" name="USER_ID" value="$USER_ID"> <INPUT size="20" type="text" name="USER_ID" value="$USER_ID" MAXLENGTH="10"> </form> </body> ■JavaScript(focus.js) function Focus(){ document.top.USER_ID.focus(); } ==================================================================== 「フォームのname="USER_ID"というテキストエリアにフォーカスを当てる」という内容になります。 なぜフォーカスが当たらないのか、原因は予想がつくのですが、どう解決していいのか分かりません。 多分、フォームの値を保持するために記述しているhiddenタグ <input type="hidden" name="USER_ID" value="$USER_ID"> にJavaScriptのフォーカスが当たってしまっているみたいです。(フォーカスが当たっていると思われるhiddenタグは見ることができません) 試しにhiddenタグを外してみたところ、JavaScriptで指定したテキストエリアにフォーカスが当たっていることを確認しました。 「応募フォーム」ということで、ページ遷移した際にもフォームに入力した値を保持しておくためにhiddenタグは外したくないのですが、フォーカス機能もちゃんと動くようにしたいと思っております。 解決方法が分かる方いらっしゃいましたら、ご教授の程お願い致します。
- 山 まこと（@yama-maron）
- お礼率75% (82/109)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
同じフォーム内の複数のインプットに同じnameを与えることに問題があるような気がしますが… hiddenのほうを USER_ID_HIDDEN などとでも名前を変えてあげればよさそうですけれど？ そのまま、強行にやるなら、現状のブラウザ（HTML 4.0）であれば document.getElementsByName("USER_ID")[1].focus(); または、 document.forms[0].elements["USER_ID"][1].focus(); （↑当該formが最初のformと仮定しています） などで、一応通じるとは思いますが、将来的にどうなるかはよくわかりません。
その他の回答 (1)
- taka451213
- ベストアンサー率47% (436/922)
こんばんは。 ＃１さんの意見に同意・・・。 どうしても同じnameじゃないとダメなんだったら、Javascript用にID付ければ？
お礼
taka451213さん 迅速なご対応、ありがとうございます。 やはりJavaScriptで対応するより、同じname値があることが問題なのですね。。 同じ意見の回答をしていただく方が多くいらっしゃると、とても参考になりました。 どうもありがとうございます。
関連するQ&A
- javascript と php の、フォームを使わない送受信について
初めて質問します。わかりにくいかも知れませんが、どうぞよろしくお願いします。 当方、HTTPXMLオブジェクト（？）を使ってHTTP通信を試みていますが、phpでのPOST受信が出来ず困っております。 以下、要約したソースコードを掲載します。 javascript側----------------- post_data = 'user_id='+ user_id +'&password=' + password; //user_id,password共にテキストフォームに入力された変数です （中略） httpObj.open('POST','hoge.php',true); httpObj.send(post_data); //これで送信し （中略） a = httpObj.responceText //で受け取っています。 ---------------------------------- php側----------------------------- $user_id = $_POST['user_id']; $password = $_POST['password']; ～DB接続処理～ print $res; //$resはjavascriptに送る文字列です ---------------------------------- と言うような感じなのですが、 javascript側の最後の a にはちゃんと $res の内容が格納され、表示もされることを確認しているのですが、 php側の$_POST['user_id']に何も入らずnullのままで、どうしたらいいのか途方に暮れています…。 蛇足かも知れませんが、念のためにHTML側のテキストフォーム部のソースだけを書いておきます。 <input type="text" id="user_id">ユーザ名 <input type="password" id="pass">パスワード <input type="button" id="login" value="log in"> <form>タグは使わず、ボタンがクリックされたときに、テキストフォームの内容を読み取ってphpに値を投げると言うイベントハンドラ的な動作をしています。 フォームの内容はjavascriptで取れていますが、如何せんphpへ投げたときにphpが受け取ってくれない…… 長文申し訳ございません。回答のほう、よろしければお願いします。
- ベストアンサー
- JavaScript
- ★大至急！JavaScriptのif文教えてください。
★大至急！JavaScriptのif文教えてください。 フォームで <p> <?php if($_POST["type_id"]== 0){?> <input type="hidden" checked="" value="0" name="type_id">無料 <?php }?> <?php if($_POST["type_id"]== 1){?> <input type="hidden" checked="" value="1" name="type_id">有料 <?php }?> </p> この条件で、 無料の場合は、(1)メール 有料の場合は、(2)メール というように違う内容のメールを送信したいです。 意味がわからなかったら、すみません。 よろしくお願いします！！
- ベストアンサー
- JavaScript
- フォーカスが外れた時の入力チェックの仕方
htmlで書かれたテキストエリアのフォーカスが外れた時に、 入力チェックを行いたいのですが すでに <input type=text name=abc value=""> というinputタグが存在していて このタグに手を加えずjavascriptを使い どうにかテキストエリアabcのフォーカスが外れた時に、 入力チェックを行いたいです 要するに htmlで<input type=text name=abc value="" onblur="関数名"> っと書く事が出来ないという状況です。 全く案が思い浮かびません 何かいい案がおありでしたらよろしくお願い致します
- 締切済み
- JavaScript
- フォームからsubmitをした後再読込させない
ほぼ初心者でフォームからの申込みを作っています 現在 <form name="a11" action="/products/detail.php" method="post" > <input type="hidden" name="mode" value="cart" /> <input type="hidden" name="product_id" value="137" /> <input type="hidden" name="product_class_id" value="634" /> <input type="checkbox" name="quantity" value="1" /><br /> <input type="submit" value="受講する" onClick="alert('カゴに入れました');value='受講する'" /> </form> というフォームが数十個あるのですが、 一つチェックボックスにチェックを入れて送信するとページの再読み込みがされて チェックボックスのチェックが消えてしまいます どのチェックボックスにチェックを入れたかは残したまま、次のsubmitを押させたいのです 申込み者がどのフォームにチェックを入れて送信をしたかを見れるようにして 次のページに飛ばしたいのです どうかご教授願います HTMLの項目で質問させていただきましたが、JavaScriptのプログラム例など 併せてご教授いただけますと助かります どうぞよろしくお願いいたします
- 締切済み
- HTML
- CURDATE( )をフォーム内で使用するには?
MySQLにフォームでインサートすることに悩んでいます。 INSERT INTO table (id,date) VALUES ('1234',CURDATE()) とするとmySQLにユーザーIDと本日の日付を入力できます。 これをフォームから下記の形で入力しようとすると、日付が入力されず、0000-00-00 になってしまいます。 <form action ="insert.php"> <input type="hidden" name="id" value='1234' > <input type="hidden" name="date" value="<?php print(CURDATE()); ?>" > <input type="button" value="submit" name="入力"> </form> value=""の中で本日の日付を指定する場合はどうすればいいかをご教示願います。
- ベストアンサー
- MySQL
- javascriptにてHTMLのhiddenエリアのvalueを変更したい
javascriptにてHTMLのHIDDENエリアのVALUEをフォームの値が変わるごとに更新していきたいのですが、やり方がいまいちわかりません。 <input type = "text" value="10" id="aaa" onchange=aaa();/> <input type = "text" value="20" id="bbb" onchange=aaa();/> <input type = "hidden" name="abc" value="aaa"/> <script> function aaa(){ document.abc.value = document.getElementById("aaa").value+document.getElementById("bbb").value ; } </script> このような感じで考えていますが、進みません。どなたかご教授お願いいたします。
- 締切済み
- JavaScript
- エンターキーで画像にフォーカス
エンターキーを押すと画像にフォーカスが移るようにしたいのですが、 下記のスクリプトをスマホで実行するとiphoneっで文字入力ができなくなります。(chrome) アンドロイドとIphoneで実行ボタンで画像にフォーカスを移すにはどうすれば良いでしょうか --HTML-- <img id="pic" src="img/img.png"/> <input id="comment" type="text" name="comment" runat="server" onkeypress="return submitStop(event);"/> ---JS--- function submitStop(e) { if (!e) var e = window.event; if (e.keyCode == 13) pic.focus; return false; }
- ベストアンサー
- JavaScript
- フォームで同じ複数のnameで違うvalueの送信
始めまして、現在一個のフォーム内で複数の同じnameで、違うvalueを送信しようと苦戦しております、、普通にタグを書くだけでは 一個のnameで違うvalueの送信は、最後のvalueしか送信できないです、 phpは使用できません。javaは、、殆ど素人なので、あまり分かりません、、formを一個一個区切るのも、レイアウト上できません、、 どうすればいいのでしょうか？・・・以下タグです。 昨日から、ここから先に進めません。。 先輩方助けてください、本当によろしくお願いします。 <form action="http://hoge.net/hoge/hogecheck.php" method="post"> <input type="hidden" name="site" value="hoge"> <input name="id" type="text" id="idform" maxlength="10" /> <input type="hidden" name="kin" value="3000"> <input type="image" src="buybtn.gif" /> <input type="hidden" name="kin" value="5000"> <input type="image" src="buybtn.gif" /> <input type="hidden" name="kin" value="10000"> <input type="image" src="buybtn.gif" /> <input type="hidden" name="kin" value="20000"> <input type="image" src="buybtn.gif" /> </form>
- ベストアンサー
- Java
- PHPとJavascriptの連携について質問です。
PHPとJavascriptの連携について質問です。 複数の入り口（HTML）から一つのお問い合わせフォーム（PHP）へ繋げるにあたって、 今Javascriptで、各HTMLページのタイトルをフォームへ表示させることはできたんですが、 それをPHPのメールフォームで書き出す方法がわかりません。 HTML内のJavascriptは以下のとおりです。 <script type="text/javascript"><!-- var cnm = CourseRead(); document.write(cnm); document.write("<input type=hidden name=torikomi value='"+cnm+"' >"); //--> </script> 以下の様にlistで各タイトルがふってあります。 list[0] = "タイトル"; list[1] = "タイトル"; お問い合わせのメールが届いた時に、どのページからのお問い合わせなのかが メール上で分かるようにしたいです。 ちなみに、見よう見まねでやっていて、 JavascriptもPHPも、ほぼ知識がない状態です。 教えてください！
- 締切済み
- PHP
- フォームでのタグについて
検索フォームに IDを入力して ブログを表示するようなURLでリンクしたいと考えています。 <form method="get" action="http://blog.goo.ne.jp/" class="search" target="_blank"> <div> <input type="text" name="ID" class="textBox"><input type="hidden" value="/"> <input type="submit" value="検索" class="btn"> </div> </form> 上のようなhtmlタグを作りましたが うまく http://blog.goo.ne.jp/synchro-night/ http://blog.goo.ne.jp/(IDをフォームで入力)/ のようなリンクができません。 どのように変えればよいのでしょうか？ JavaScriptで する必要があるのでしょうか？
- ベストアンサー
- HTML
お礼
fujillinさん 迅速なご対応、ありがとうございます。 今までこうやって作ってきたので、同一テンプレート内に同じnameがあることに違和感がなかったのですが、バリデートをかけたときにそこが減点されていたということもあり、仰る通りだと思います。 hiddenの方に"_HIDDEN"と追加してあげた名前にして、PHPを修正して対応することができました。 JavaScriptの方を修正することも考えましたが、"将来的に"という言葉が気になったので、こちらでの対応はやめておきました。 ご丁寧な回答を、どうもありがとうございました。