CODEWITHSUNDEEP
javascripthtml
Basj
Basj

Reputation: 46493

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

I have a page with a few <div> containers.

How to give focus to one of them on page load, so that the user can use arrow keys to scroll (or even SPACE to scroll) without having to click on the div first?

I have tried:

<div id="main" autofocus>

but autofocus doesn't seem to work on non-input div.

_

This could be a solution but then the browser address bar would display the id http://example.com/#main which I don't want:

<body onload="location.hash = 'main';">
<div id="main">content</div>
</body>

_

Example: when you open https://en.wikipedia.org/wiki/Main_Page, you can immediately use Down arrow key or Space to scroll, without having to click anywhere.

Upvotes: 8

Views: 4487

Answers (4)

Joost Meijer
Joost Meijer

Reputation: 395

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

Upvotes: 6

ThS
ThS

Reputation: 4783

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.

Upvotes: 0

brk
brk

Reputation: 50291

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>

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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>

Upvotes: 1

Related Questions