2010-11-16 16 views
20

जब मैं एक बटन क्लिक करता हूं तो मैं textarea पर li तत्व पर ध्यान केंद्रित करना चाहता हूं।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 भर अद्वितीय होना के लिए होती हैं डोम –

+0

बटन पर @ जैकोब मेरे पास केवल संख्या है लेकिन ली तत्व पर मेरे पास टिप्पणी-आईडी है। क्या मदद नहीं करनी चाहिए? –

उत्तर

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