Mettre l'accent dans une zone de texte avec un nom de variable en utilisant javascript

Question

J'ai un site qui répertorie plusieurs événements à venir, et chaque événement a un bouton de commentaire pour laisser des commentaires. Il ressemble à ceci (il est en suédois, mais je pense que vous pouvez comprendre la structure):

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

Le div contenant le textarea pour écrire le commentaire est d'abord caché, et en cliquant sur le « comment'- icône est affichée en utilisant le javascript suivant:

<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'; 
      } 
     } 
    } 

le script contient un hack pour afficher le caché correctement div dans IE quand un autre (d'abord caché) div est également affiché dans lequel peuvent être apportés à l'événement. Mais peu importe.

Le code php-pour afficher le formulaire de commentaire ressemble à ceci:

//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>"; 

Ce code se trouve dans une boucle qui affiche tous les événements à venir qui sont stockés dans une base de données mySQL. Comme on peut le voir, les divs reçoivent des noms de variables comme comment1, comment2, etc. afin de lier les commentaires à l'événement correct.

C'est le code pour afficher le commentaire-icône et de le lier au 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>"; 

Ce que je voudrais faire est de mettre l'accent dans le champ textarea correct qui devient visible lorsque le commentaire -icon est cliqué pour que l'utilisateur puisse commencer à taper directement. J'ai essayé de modifier le javascript ci-dessus en utilisant focus(), mais je ne peux tout simplement pas le faire fonctionner. Des idées sur comment je peux réaliser ce que je veux?

Merci.

/Linus

Answer 1

Ce axera le premier textarea dans la div, qui est ce que vous voulez:

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

Answer 2

Dans votre fonction javascript pour montrer la forme:

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 

Je devine ici que comment_id sera l'id du textarea pour le commentaire. Si ce n'est pas le cas, document.getElementById(); utilisait l'identifiant de la zone de texte dans la dernière ligne.

Answer 3

Je vous recommande de commencer à utiliser JQuery ou Dojo cadres Javascript.
Ils vous faciliteront la vie. Il rend la manipulation DOM très facile, rapide, moins verbeuse et encore plus flexible.
De cette façon, vous n'aurez pas trop de problèmes avec des choses simples.
J'utilise beaucoup Dojo moi-même. C'est vraiment super.