Javascript Focus on DIV Element not working on chrome

Question

Hi i want to Focus on div immediately after page load. it's working perfect on Firefox, but not on chrome, it's not working. this is my code :

https://jsfiddle.net/9yb2boxn/

document.getElementById("focusme").focus();

#focusme {width:400px; height:100px; overflow-y:scroll; }

<div id="focusme">
  focus me focus me focus me focus me  focus me focus me focus me focus me  focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me
</div>

in Firefox when i run this code and i Press Down Arrow on keyboard, the div scrolling down. but not on chrome. why this problem occure?

i already try

setTimeout(function() {

   document.getElementById("focusme").focus();

}, 1);

still not working.

please help. thanks

Possible duplicate of Is it possible to focus on a <div> using javascript focus() function?. — Michał Perłakowski
– Michał Perłakowski, Commented Feb 20, 2016 at 13:07

Community · Accepted Answer · 2017-05-23 10:31:12Z

38

If you want to make a non-focusable element focusable, you must add a tabindex attribute to it:

<div id="focusme" tabindex="1"></div>

Also, you can use the ID to reach it with the location hash. See the answer to your question here: Is it possible to focus on a <div> using javascript focus() function?

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Feb 20, 2016 at 13:05

Sebastien Daniel

4,8083 gold badges21 silver badges34 bronze badges

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

1 Comment

Ching Ching Over a year ago

G! that's working perfect! thank you so muuuuucccch! Mr. Sebastian! YOU DA REAL MVP!!!

Nitin Garg · Accepted Answer · 2016-02-20 13:12:41Z

3

if you want to set focus to div through javascript you can use below code

$("#focusme").attr("tabindex",-1).focus();

Hope this helps you.

 $("#focusme").attr("tabindex",-1).focus();

#focusme {width:400px; height:100px; overflow-y:scroll; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="focusme">
  focus me focus me focus me focus me  focus me focus me focus me focus me  focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me
</div>

answered Feb 20, 2016 at 13:12

Nitin Garg

8866 silver badges7 bronze badges

3 Comments

Ching Ching Over a year ago

thanks Nitin, your Method also working! really thank you! you are nice guy.!

Sebastien Daniel Over a year ago

downvoted. requiring jquery for something so basic is overkill.

Nitin Garg Over a year ago

As I mentioned if it is required to focus to div at runtime. And does it still overkills if jquery is already being used?

Collectives™ on Stack Overflow

Javascript Focus on DIV Element not working on chrome

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related