Почему focus() не выбирает мой контейнер div?

У меня есть index.html, в котором есть JavaScript:

byId("p").value = page;
byId("nav_container").focus();
document.forms["nav_form_main"].submit();

Фокусная часть здесь не работает.

Я хочу, чтобы браузер сосредоточился на определенной части страницы (почти сверху).

Я попытался поставить фокус после submit(), та же проблема там.

Ответ 1

убедитесь, что элемент, который вы хотите сфокусировать, имеет атрибут tabindex="-1", иначе этот элемент не будет сфокусирован.

Например

<div id="myfocusablediv" tabindex="-1"></div>

Когда вы устанавливаете tabindex = -1 для элемента, он позволяет получить фокус() через javascript. Если вместо этого вы хотите получить фокус через табуляцию через элементы, тогда вы должны установить атрибут tabindex равным 0.

Ответ 2

Вот что я делаю, когда хочу заставить определенный элемент формы иметь фокус:

function setFocusFixed( elm ){
    if( !input ) return;

    var savedTabIndex = elm.getAttribute('tabindex')
    elm.setAttribute('tabindex', '-1')
    elm.focus()
    elm.setAttribute('tabindex', savedTabIndex)
}

// DEMO: 

var buttons = document.querySelectorAll('button'),
    input   = document.querySelector('input');

buttons[0].addEventListener('click', ()=>input.focus())
buttons[1].addEventListener('click', ()=>setFocusFixed(input))

<input placeholder='some input' tabindex='2' />
<button>Set focus on input</button>
<button>Set focus on input - fixed</button>

Ответ 3

После отправки формы любой фокус становится неактуальным. Документ изменяет местоположение на действие формы и фокус все равно теряется.

Похоже, вы хотите установить фокус после submit, в этом случае сделайте это в событии onload:

window.onload = function WindowLoad(evt) {
   byId("nav_container").focus();
}

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

<a name="nav_container_anchor" />

Затем, чтобы этот JS-код прокручивался до этого местоположения:

document.location = "#nav_container_anchor";

Ответ 4

Вам нужен атрибут tabindex="0" чтобы иметь возможность фокусироваться (работает для меня): tabindex="-1" удалить элемент из последовательности вкладок страницы (он больше не фокусируется, например, с помощью клавиатуры).

-1 все еще может фокусироваться в некоторых случаях, но не с помощью клавиатуры (клавиша табуляции),
0 можно фокусировать в автоматическом порядке
Любое другое положительное число определяет порядок фокусировки элементов

https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex