2010-11-16 19 views
20

Cuando hago clic en un botón quiero textarea en este elemento li para enfocar.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> 

Ésta es mi jQuery código:

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

lo general, no quiere combinar 2 'id' selectores en la misma expresión, esto es una mala práctica como' id's están destinados a ser único en todo el DOM. –

+0

@Jacob en el botón solo tengo el número, pero en el elemento li tengo ID de comentario. ¿No deberías eso ayudar? –

Respuesta

23

Basado en su comentario en respuesta a Jacob, quizás usted quiere:

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

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

    return false; 
}); 

Esto debería dar el foco #StatusMessageReplyMessage elemento después de el efecto de deslizamiento ha finalizado.

+0

gracias. He escrito el id. de área de texto incorrecto: D StatusMessageReplyMessage debería haber sido en lugar de StatusMessageMessage –

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

utilizo temporizador para enfocar las áreas de texto:

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

Funciona con esta solución. ¿Puedes explicar por qué no funciona sin eso? – Mutant

+1

Según tengo entendido, el clic otorgará algo de enfoque durante el manejo del evento, anulando su propio enfoque. El tiempo de espera ejecuta su enfoque después de que se haya completado el manejo de evento síncrono actual. – dule