jQuery Textarea focus

Question

When I click a button I want the textarea in this li element to 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>

This is my jQuery code:

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

You usually do not want to combine 2 `id` selectors in the same expression, this is bad practice as `id`s are meant to be unique throughout the DOM. — Jacob Relkin, Nov 16 '10 at 04:36
@Jacob on the button i only have the number but on the li element i have comment-id. shouldnt that help ? — Harsha M V, Nov 16 '10 at 04:43

score 35 · Answer 1 · edited Jan 31 '14 at 15:25

35

I use timer to focus text areas :

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

edited Jan 31 '14 at 15:25

Subin

3,445
1
34
63

answered Aug 19 '13 at 11:14

Roman Yudin

924
10
8

It works with this solution. Can you explain why its not working without it? – Mutant Feb 26 '14 at 00:36
3

As I understand it, the click itself will grant something focus during the event handling, overriding your own focus. The timeout executes your focus after the current synchronous event handling has completed. – dule May 09 '14 at 20:37

score 28 · Accepted Answer · answered Nov 16 '10 at 04:28

28

Based on your comment in reply to Jacob, perhaps you want:

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

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

    return false;
});

This should give the #StatusMessageReplyMessage element focus after the slide effect has finished.

answered Nov 16 '10 at 04:28

Horatio Alderaan

3,264
2
24
30

thanks. i had written the wrong text area id :D StatusMessageReplyMessage should have been instead of StatusMessageMessage – Harsha M V Nov 16 '10 at 04:33

score 24 · Answer 3 · edited Apr 29 '19 at 14:37

24

The easiest solution is to use jQuery focus

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

NOTE: if you are testing this in the console, Chrome will send the focus back to the console! This can lead you to believe it had not worked when in fact it works perfectly. Just be aware of other focus grabbing scripts/behavior in your environment and it will all be fine :)

edited Apr 29 '19 at 14:37

dankilev

720
2
10
32

answered Nov 16 '10 at 04:26

zod

12,092
24
70
106

This solution is great. Very straight to the point. I'm working with a private password protected web app that lives inside an iframe and every time the page reloads, the textarea loses autofocus and it's frustrating to have to keep clicking in the textarea to type again. This solved it. Take my upvote. I put it in the same document that the textarea resides in so that when it refreshes, it hits that js focus line and immediately snaps the cursor where it should be. – Scott Dallas Mar 01 '22 at 00:51

jQuery Textarea focus

3 Answers3

Linked