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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:30:51+0000

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>

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags