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 ids are meant to be unique throughout the DOM. — Jacob Relkin
– Jacob Relkin, Commented Nov 16, 2010 at 4: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
– Harsha M V, Commented Nov 16, 2010 at 4:43

Subin · Accepted Answer · 2014-01-31 15:25:45Z

36

I use timer to focus text areas :

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

edited Jan 31, 2014 at 15:25

Subin

3,5731 gold badge36 silver badges65 bronze badges

answered Aug 19, 2013 at 11:14

Roman Yudin

1,00311 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mutant Over a year ago

It works with this solution. Can you explain why its not working without it?

dule Over a year ago

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.

Horatio Alderaan · Accepted Answer · 2010-11-16 04:28:08Z

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.

thanks. i had written the wrong text area id :D StatusMessageReplyMessage should have been instead of StatusMessageMessage

dankilev · Accepted Answer · 2019-04-29 14:37:35Z

25

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, 2019 at 14:37

dankilev

7322 gold badges13 silver badges33 bronze badges

answered Nov 16, 2010 at 4:26

zod

12.5k25 gold badges74 silver badges107 bronze badges

1 Comment

Scott Dallas Over a year ago

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.

Collectives™ on Stack Overflow

jQuery Textarea focus

3 Answers 3

2 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Linked

Related