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

Focus events are used for input elements. Use click event instead:

document.querySelector('#main').click();

Also, make use of tabindex to bind keyboard events on non-input elements:

<div id="main" tabindex="0">main content</div>

Answer 2

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 </body>

HTML: add tabindex attribute to div#main

<div id="main" tabindex="-1">

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.

Answer 3

You can use JavaScript to focus an element, and tabindex to allow the element to be focused.

document.querySelector(".focus").focus();

.focus {
  height: 100px;
  width: 100px;
  overflow: scroll;
}

<div>Hello</div>
<div>Another div</div>
<div class="focus" tabindex="0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div>Bye</div>

Answer 4

To focus on non input element you need tabIndex and use focus method.autofocus works on selected set of element

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

#main:focus {
  border: 1px solid;
}

<div id="main" tabindex="1">hello</div>