Unable to set focus and cursor to input text using javascript in Chrome Console

Question

This is in reference to this SO answer. I am trying the same on web.whatsapp.com (chrome) for its input search field. Here is my code to do it:

document.getElementsByClassName("input input-search")[0].focus()
document.getElementsByClassName("input input-search")[0].select()

Above does not work from chrome console.

Also the jQuery code:

$(".input-search").focus()

does not work. What could be the reason that I don't see the cursor even after executing above methods?

document.querySelector(".input-search").focus(); works! and $(".input-search").focus(); provided you have jQuery included. — lshettyl
– lshettyl, Commented Mar 27, 2015 at 12:26
@Mark the element does not have an id. Its Html is: <input type="text" class="input input-search" tabindex="2" value="" data-reactid=".0.1:$main.2.2.2.1"> — rahulserver
– rahulserver, Commented Mar 27, 2015 at 12:27
You may have other errors which is why. This works - http://jsfiddle.net/lshettyl/y0f04L88/ — lshettyl
– lshettyl, Commented Mar 27, 2015 at 12:29

K K · Accepted Answer · 2015-03-27 12:41:03Z

37

I think this is not related to issue with class, id, javascript or jQuery. It's the way browser console works. The console gets focus after each command is run. So the focus will not work for other inputs from the console.

To test it, run this code in console.

setTimeout(function(){$(".input.input-search").focus()},5000);

After executing it immediately click anywhere on the page to take focus out of console. Now after 5 seconds, the focus will set on input.

answered Mar 27, 2015 at 12:41

K K

18.2k4 gold badges33 silver badges39 bronze badges

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

4 Comments

rahulserver Over a year ago

Oh Man! You made the day for me. Thanks for this awesome answer and I am sure that it would help many people.

NedStarkOfWinterfell Over a year ago

In many cases, I see that setTimeout(function(){$(".input.input-search").focus()},0); does the trick, while $(".input.input-search").focus(); doesn't, even though both are essentially the same. Why might this be?

K K Over a year ago

@AttitudeMonger Both aren't same. setTimeout function adds a task to the queue which is executed after a given interval, while .focus() is not added to any queue for execution. So, in case of setTimeout, a gap of milliseconds might be enough to perform the above said task. You may read more about how setTimeout works.

jklue Over a year ago

related: when console was open I didn't see the cursor in the browser after elment.focus() although typing proved it was in the right place. Closing the console did indeed show the cursor where expected. Thanks for the lead!

Collectives™ on Stack Overflow

Unable to set focus and cursor to input text using javascript in Chrome Console

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related