javascriptを使用して変数名のテキストエリアにフォーカスを置く

Question

私はいくつかの予定されているイベントをリストするサイトを持っており、各イベントにコメントを残すためのコメントボタンがあります。コメントを書くためのテキストエリアを含むdiv要素が最初に隠されている

http://www.shipit.se/dump/event.png

、と「comment'-をクリックすると：それは、この（それはスウェーデン語でですが、私はあなたが構造を把握することができると思う）のように見えます

<script language="javascript" type='text/javascript'> 
    function showhide_comment(comment_id, change_id) { 
     if (document.getElementById(comment_id).style.display == 'none') { 
      if (document.getElementById(change_id).style.display == 'block') { 
       document.getElementById(change_id).style.display = 'none'; 
       document.getElementById(comment_id).style.display = 'block'; 
       document.getElementById(change_id).style.display = 'block'; 
      } else { 
       document.getElementById(comment_id).style.display = 'block'; 
      } 
     } else { 
      if (document.getElementById(change_id).style.display == 'block') { 
       document.getElementById(change_id).style.display = 'none'; 
       document.getElementById(comment_id).style.display = 'none'; 
       document.getElementById(change_id).style.display = 'block'; 
      } else { 
       document.getElementById(comment_id).style.display = 'none'; 
      } 
     } 
    } 

スクリプトが別の（最初は非表示）のdivはまた、イベントにすることができる変化する表示されたときに隠されたIEで正しくDIVを表示するためのハックが含まれています。それは次のJavaScriptを使用して表示されるアイコンです。しかし、それは気にしないでください。

コメントフォームを表示するためのPHPコードは次のようになります。

//Comment form, initially hidden 
      echo "<div id=\"comment" . $row->id . "\" class=\"submit-comment\" style=\"display: none\">"; 
      echo "<form name=\"make_comment\" method=\"post\" action=\"submit_comment.php\">"; 
      echo "Kommentar:<br/>"; 
      echo "<textarea name=\"comment\" class=\"comment\" rows=\"0\" cols=\"0\"></textarea><br/>"; 
      echo "<input type=\"hidden\" name=\"event_id\" value=\"$row->id\"/>"; 
      echo "<input class=\"comment\" type=\"submit\" name=\"submit_comment\" value=\"Skicka\" />"; 
      echo "</form>"; 
      echo "</div>"; 

このコードは、MySQLデータベースに格納されているすべての今後のイベントを表示するループの内側にあります。見て分かるように、divにはcomment1、comment2などの変数名が与えられ、コメントを正しいイベントにバインドします。

このコメントアイコンとJavaScriptにリンクを表示するためのコードです：私がやりたい何

echo "<li class=\"icon-left\"> 
      <a href=\"javascript:showhide_comment('comment" . $row->id . "', 'change" . $row->id . "')\"> 
      <img src=\"images/comment-24x24.png\" title=\"Kommentera körning\" alt=\"Kommentera körning\" /> 
      </a></li>"; 

コメント見えるようになり、正しいTEXTAREAフィールド内にフォーカスを置くことですユーザーが直接入力を開始できるように-iconがクリックされます。フォーカス（）を使用して上記のjavascriptを修正しようとしましたが、動作させることができません。どのように私は私が欲しいものを達成することができますか？

ありがとうございました。

/ライナス

Answer 1

これは、あなたが望むものであるdivの、最初のテキストエリアに焦点を当てます：

document.getElementById(comment_id).getElementsByTagName('textarea')[0].focus(); 

Answer 2

フォームを示すためのあなたのjavascript関数で：

if (document.getElementById(comment_id).style.display == 'none') { 
         if (document.getElementById(change_id).style.display == 'block') { 
           document.getElementById(change_id).style.display = 'none'; 
           document.getElementById(comment_id).style.display = 'block'; 
           document.getElementById(change_id).style.display = 'block'; 
           document.getElementById(comment_id).focus(); //This will set the focus 

私はcomment_idコメント用のテキストエリアへのidになることを、ここで推測しています。そうでない場合は、document.getElementById();の最後の行にあるtextareaのidを使用します。

Answer 3

私はJQueryまたはDojo JavaScriptフレームワークの使用を開始することをお勧めいたします。
あなたの人生はずっと楽になります。これは、DOM操作を非常に簡単に、速く、より冗長で、より柔軟にします。
あなたは単純なことでそれほど問題にならないでしょう。
私自身も多くのDojoを使用しています。それは本当に素晴らしいです。