Autofocus to a div so we can use arrow keys to scroll without having to click first

Question

I have a page with a few

containers.

How to give focus to one of them on page load, so that the user can use arrow keys to scroll (or even

Answer 1

You need, first of all, to add a tabindex="-1" to div#main to make it programmatically focusable. Then with javascript get the div and make it focused.

Here's a snippet: make sure to add the code in window.onload event or to put your script tag directly before

HTML: add tabindex attribute to div#main

JavaScript: make div#main focused

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

With that it will be automatically focused and still accept click event if you need to do some stuff when clicked, clean!

Hope I was able to put you further.