Атрибут HTML5 AutoFocus заставляет Firefox прокручивать страницу вниз

У нас есть приложение HTML5 (<!DOCTYPE html>) с Twitter Bootstrap и различными другими библиотеками JavaScript (включая jQuery) - все они работают в своих текущих версиях.

Страница содержит текстовый ввод с установленным атрибутом autofocus.

<input type="text" autofocus="autofocus" />

Страница содержит более одного «экрана» контента, что означает, что на странице всегда будет вертикальная полоса прокрутки. Поле для ввода текста находится в пределах первой «складки» страницы, прибл. 250 пикселей от верха страницы.

В Chrome, Safari и Opera страница работает должным образом. Когда страница загружается, элемент отображается на экране и находится в фокусе.

В FireFox (текущая версия - 18.0.1) элемент имеет фокус, но страница прокручена до 1533 пикселей (определяется через window.pageYOffset). Одна и та же страница с разной длиной содержимого всегда будет прокручиваться в одну и ту же позицию, а элемент будет отображаться за пределами экрана.

Определенно есть только один элемент с установленным атрибутом автофокуса ($("[autofocus]").length).

Удаление атрибута autofocus из элемента вообще не приводит к прокрутке страницы (т.е. страница остается прокрученной вверх - как и ожидалось).

Может ли кто-нибудь предложить какую-либо помощь или понимание?

Вещи, которые мы пробовали

Следующий тест работает правильно:

<!DOCTYPE html>
<html>
<head>  </head>
<body>
  <div style="height: 200px">
    <h1>Test</h1>
  </div>
  <div style="height: 2000px">
    test
    <br />
    <input autofocus type="text" />
  </div>
</body>
</html>

person asafb    schedule 05.02.2013    source источник
comment
Можете ли вы опубликовать ссылку на тест, который не работает правильно?   -  person Boris Zbarsky    schedule 05.02.2013
comment
Я видел такое поведение и в Chrome 25   -  person monkeyboy    schedule 15.03.2013
comment
Не видя того, что терпит неудачу, трудно ответить на вопрос. Подобное поведение происходило со мной, потому что у меня были модальные окна, отображаемые в нижней части страницы с установленным атрибутом автофокуса. Несмотря на то, что модальные окна не были активными, Firefox прокручивал входы с автофокусом.   -  person jrhorn424    schedule 12.10.2013
comment
Ошибка FF   -  person feitla    schedule 11.12.2013


Ответы (2)


Мы недавно повторили эту попытку с Firefox и не можем воспроизвести проблему.

Закрытие ...

person asafb    schedule 03.04.2014

Вам понадобится код css, чтобы сказать это: .focusedInput { border-color: rgba(82,168,236,.8); outline: 0; outline: thin dotted \9; -moz-box-shadow: 0 0 8px rgba(82,168,236,.6); box-shadow: 0 0 8px rgba(82,168,236,.6) !important; } Тогда код ввода текста будет следующим: <input class="form-control focusedInput" type="text">

person Peter    schedule 05.03.2014
comment
За исключением того, что это ДЕЙСТВИТЕЛЬНО НЕ ФОКУСИРУЕТ элемент управления! - person Doin; 16.11.2015