2010-11-16 9 views
20

Lorsque je clique sur un bouton, je veux que le textarea apparaisse dans cet élément li.jQuery Textarea focus

<li class="commentBlock" id="commentbox-79" style="display: list-item;"> 
    <div> 
    <div class="grid userImageBlockS"> 
     <div class="imgSmall"> 
     <img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"> 
     </div> 
    </div> 
    <div class="grid userContentBlockS alpha omega"> 
     <form accept-charset="utf-8" action="/bakasura1/account/saveComment" method="post"> 
     <div style="display: none;"> 
      <input type="hidden" value="POST" name="_method"> 
     </div> 
     <input type="hidden" id="StatusMessageReplyPid" value="79" name="data[StatusMessageReply][pid]"> 
     <input type="hidden" id="StatusMessageReplyItemId" value="1" name="data[StatusMessageReply][item_id]"> 
     <input type="hidden" id="StatusMessageReplyCommentersItemId" value="1" name="data[StatusMessageReply][commenters_item_id]"> 
     <textarea id="StatusMessageReplyMessage" name="data[StatusMessageReply][message]"> 
      Write your comment... 
     </textarea> 
     <input type="submit" name="" value="Comment" class="comment" id="comment-79"> 
     </form> 
    </div> 
    <div class="clear"></div> 
    </div> 
</li> 

Ceci est mon code jQuery:

$('.user-status-buttons').click(function() { 
    var id = $(this).attr('id'); 
    $("#commentbox-"+id).slideToggle("fast"); 
    $("#commentbox-"+id+" #StatusMessageMessage").focus(); 
    return false; 
}); 
+3

Vous ne voulez pas l'habitude de combiner 2 'id' sélecteurs dans la même expression, c'est une mauvaise pratique comme' id's sont destinés à être unique dans le DOM. –

+0

@Jacob sur le bouton Je n'ai que le numéro mais sur l'élément li j'ai un commentaire-id. Ne devrait pas aider? –

Répondre

23

Sur la base de votre commentaire en réponse à Jacob, peut-être vous voulez:

$('.user-status-buttons').click(function(){ 

    var id = $(this).attr('id'); 
    $("#commentbox-"+id).slideToggle("fast", function(){ 
     $("#commentbox-"+id+" #StatusMessageReplyMessage").focus(); 
    }); 

    return false; 
}); 

Cela devrait donner le focus de l'élément #StatusMessageReplyMessageaprès l'effet de diapositive est terminé.

+0

merci. J'avais écrit le mauvais identifiant de zone de texte: D StatusMessageReplyMessage aurait dû être à la place de StatusMessageMessage –

12
$('#StatusMessageReplyMessage').focus(); 
24

J'utilise la minuterie pour se concentrer zones de texte:

setTimeout(function() { 
$el.find('textarea').focus(); 
}, 0); 
+0

Cela fonctionne avec cette solution. Pouvez-vous expliquer pourquoi cela ne fonctionne pas sans cela? – Mutant

+1

Si je comprends bien, le clic lui-même accordera quelque chose de focus pendant la gestion de l'événement, en remplaçant votre propre focus. Le délai d'exécution exécute votre focus après la fin de la gestion des événements synchrones en cours. – dule