Menu
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.
366
To use the arrow keys to move between cells, you must turn SCROLL LOCK off. To do that, press the Scroll Lock key (labeled as ScrLk) on your keyboard. If your keyboard doesn't include this key, you can turn off SCROLL LOCK by using the On-Screen Keyboard.
You can set focus to a div very easily,but you will need an anchor or a linkbutton.
You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.
An element can be focused by either using the autofocus="true" attribute or calling the element. focus() method. In both cases, the browser will automatically scroll the element into the viewport.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
