2010-11-16 3 views
20

Когда я нажимаю кнопку, я хочу, чтобы textarea в этом 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> 

Это мой jQuery код:

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

Вы, как правило, не хотят, чтобы объединить 2 'id' селекторов в одном выражении, это плохая практика, как' id's призваны быть уникальным DOM. –

+0

@Jacob на кнопке у меня есть только номер, но на элементе li у меня есть комментарий-id. разве это не поможет? –

ответ

23

Основываясь на ваш комментарий в ответ на Иакова, возможно, вы хотите:

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

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

    return false; 
}); 

Это должно дать фокус #StatusMessageReplyMessage элемент после эффект слайда закончен.

+0

спасибо. я написал неправильный идентификатор области текста: D StatusMessageReplyMessage должен был быть вместо StatusMessageMessage –

24

Я использую таймер, чтобы сосредоточиться текстовые области:

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

Он работает с этим решением. Можете ли вы объяснить, почему он не работает без него? – Mutant

+1

Как я понимаю, сам клик даст что-то фокус во время обработки событий, переопределяя ваш собственный фокус. Таймаут выполняет фокус после завершения текущей обработки синхронных событий. – dule