Почему этот javascript focus () не работает?

Question

У меня есть index.html, который имеет огромную форму.Форма представлена ​​этим javascript:

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

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

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

Какие-либо советы, что делать?

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

Answer 1

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

Например

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

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

Answer 2

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

/**
 * focuses on a form field element even if it has tabIndex
 * @param  {DOM object} item [description]
 */
function formItemFocus( item ){
    if( !item ){
        console.warn('no focusable item: ', item)
        return;
    }

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

Эта маленькая функция просто устанавливает поле формы tabindex в -1, поэтому DOM focus()метод может вступить в силу и немедленно вернет его к исходному значению.

Answer 3

Вам нужен атрибут 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

Answer 4

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

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

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

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

<a name="nav_container_anchor" />

Затем укажите такой код JS для прокрутки к этому месту:

document.location = "#nav_container_anchor";