※ ChatGPTを利用し、要約された質問です（原文：JavaScriptでフォームへのフォーカス処理）
JavaScriptでフォームへのフォーカス処理
このQ&Aのポイント
JavaScriptを使用してフォームの特定のテキストエリアにフォーカスを当てる方法についての質問です。
フォームのname属性を使用して、テキストエリアにフォーカスを当てる方法についてアドバイスを受けたいです。
フォーカス機能が正常に動作しない理由と、hiddenタグを使用したままフォーカス機能を実装する方法について教えてください。
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さん 迅速なご対応、ありがとうございます。 今までこうやって作ってきたので、同一テンプレート内に同じnameがあることに違和感がなかったのですが、バリデートをかけたときにそこが減点されていたということもあり、仰る通りだと思います。 hiddenの方に"_HIDDEN"と追加してあげた名前にして、PHPを修正して対応することができました。 JavaScriptの方を修正することも考えましたが、"将来的に"という言葉が気になったので、こちらでの対応はやめておきました。 ご丁寧な回答を、どうもありがとうございました。