2010-11-16 15 views
20

Quando faccio clic su un pulsante, desidero che lo textarea in questo elemento li sia attivato.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> 

Questo è il mio codice jQuery:

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

Di solito non si desidera combinare 2 'id' selettori nella stessa espressione, questa è una cattiva pratica come' id's sono destinate ad essere unico nel suo genere in tutta il DOM. –

+0

@Jacob sul pulsante ho solo il numero ma sull'elemento li ho comment-id. non dovrebbe essere d'aiuto? –

risposta

23

Sulla base della sua commento in risposta a Giacobbe, forse si vuole:

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

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

    return false; 
}); 

Questo dovrebbe dare il focus #StatusMessageReplyMessage elemento dopo l'effetto di diapositiva è terminato.

+0

grazie. avevo scritto l'ID dell'area di testo errato: D StatusMessageReplyMessage avrebbe dovuto essere invece di StatusMessageMessage –

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

Io uso il timer per mettere a fuoco le aree di testo:

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

Funziona con questa soluzione. Puoi spiegare perché non funziona senza di esso? – Mutant

+1

A quanto ho capito, il clic stesso concederà qualcosa di attivo durante la gestione degli eventi, ignorando il proprio focus. Il timeout esegue lo stato attivo dopo il completamento della gestione dell'evento sincrono corrente. – dule