2010-11-16 83 views
20

當我點擊一個按鈕時,我想要li元素中的textarea焦點。jQuery Textarea焦點

<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。 – 2010-11-16 04:36:46

+0

@Jacob按鈕上我只有數字,但在li元素上我有comment-id。應該幫助嗎? – 2010-11-16 04:43:40

回答

23

基於在回答雅各您的評論,也許你想:

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

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

    return false; 
}); 

這應該給了#StatusMessageReplyMessage元素焦點之後幻燈片效果已完成。

+0

謝謝。我寫了錯誤的文本區域ID:D StatusMessageReplyMessage應該是StatusMessageMes​​sage而不是StatusMessageMes​​sage – 2010-11-16 04:33:11

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

我用計時器集中文本區域:

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

它適用於此解決方案。你能解釋一下爲什麼沒有它就無法工作嗎? – Mutant 2014-02-26 00:36:10

+1

據我瞭解,點擊本身會在事件處理過程中授予焦點,覆蓋您的焦點。超時在當前同步事件處理完成後執行您的焦點。 – dule 2014-05-09 20:37:22