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

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

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

фокус не здесь...

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

любые советы, что делать?

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

спасибо

8
css forms html javascript

4 ответов

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

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

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

27

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

/**
 * 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 to -1 Итак, DOM focus() метод может повлиять и сразу же возвращает его к исходному значению.

5

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

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

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

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

<a name="nav_container_anchor" />

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

document.location = "#nav_container_anchor";
3

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

  • -1 по-прежнему фокусируется в некоторых случаях, но не с помощью клавиатуры (клавиша tab),
  • 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

1