JavaScriptでフォームへのフォーカス処理

Question

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タグは外したくないのですが、フォーカス機能もちゃんと動くようにしたいと思っております。

解決方法が分かる方いらっしゃいましたら、ご教授の程お願い致します。

fujillin · Accepted Answer

同じフォーム内の複数のインプットに同じnameを与えることに問題があるような気がしますが…
hiddenのほうを USER_ID_HIDDEN などとでも名前を変えてあげればよさそうですけれど？

そのまま、強行にやるなら、現状のブラウザ（HTML 4.0）であれば
　document.getElementsByName("USER_ID")[1].focus();
または、
　document.forms[0].elements["USER_ID"][1].focus();
　（↑当該formが最初のformと仮定しています）
などで、一応通じるとは思いますが、将来的にどうなるかはよくわかりません。

taka451213 · Answer

こんばんは。

＃１さんの意見に同意・・・。
どうしても同じnameじゃないとダメなんだったら、Javascript用にID付ければ？

JavaScriptでフォームへのフォーカス処理

同じフォーム内の複数のインプットに同じnameを与えることに問題があるような気がしますが…

こんばんは。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング