У меня есть страница с несколькими <div> контейнерами.

Как сделать акцент на одной из них при загрузке страницы, чтобы пользователь мог использовать клавиши со стрелками для прокрутки (или даже ПРОБЕЛ для прокрутки), не нажимая сначала div?

Я пытался:

<div id="main" autofocus>

Но autofocus, похоже, не работает с не входными данными div.

_

Это может быть решением, но тогда в адресной строке браузера будет отображаться идентификатор http: // example .com / # main, который я не хочу:

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

_

Пример: когда вы открываете https://en.wikipedia.org/wiki/Main_Page, вы можно сразу использовать клавишу со стрелкой вниз или пробел для прокрутки, не нажимая нигде.

5
Basj 3 Мар 2018 в 17:06

4 ответа

Лучший ответ

Вы можете использовать JavaScript для фокусировки элемента и tabindex, чтобы позволить элементу быть сфокусированным.

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>
3
Basj 3 Мар 2018 в 14:41

Прежде всего, вам нужно добавить tabindex="-1" в div#main, чтобы сделать его программно ориентированным. Затем с помощью javascript получите div и сделайте его сфокусированным.

Вот фрагмент кода: обязательно добавьте код в событие window.onload или поместите тег сценария непосредственно перед </body>

HTML: добавьте атрибут tabindex в div#main

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

JavaScript: сфокусировать div#main

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

При этом он будет автоматически фокусироваться и по-прежнему принимать событие нажатия, если вам нужно будет что-то сделать, когда вы нажмете, очистите!

Надеюсь, я смог продвинуть тебя дальше.

0
ths 3 Мар 2018 в 15:20

События фокуса используются для элементов ввода. Вместо этого используйте событие click:

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

Кроме того, используйте tabindex для привязки событий клавиатуры к элементам без ввода:

<div id="main" tabindex="0">main content</div>
1
Bhojendra Rauniyar 3 Мар 2018 в 14:12

Чтобы сосредоточиться на элементе без ввода, вам нужно tabIndex и использовать метод focus. автофокус работает с выбранным набором элементов

document.getElementById("main").focus()
#main:focus {
  border: 1px solid;
}
<div id="main" tabindex="1">hello</div>
1
brk 3 Мар 2018 в 14:15