HTML5 AutoFocus attribute causes Firefox to scroll to bottom of page

StackOverflow https://stackoverflow.com/questions/14699875

Domanda

We have an HTML5 application (<!DOCTYPE html>) with Twitter Bootstrap and various other JavaScript libraries (including jQuery) - all running on their current versions.

The page contains a text input with the autofocus attribute set.

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

The page contains more than one 'screen' of content, meaning there will always be a vertical scrollbar on the page. The text input is located within the first 'fold' of the page, approx. 250px from the top of the page.

On Chrome, Safari and Opera the page works as expected. When the page loads, the element is on screen and focused.

On FireFox (current version - 18.0.1) the element has focus, but the page has scrolled to 1533px (determined via window.pageYOffset). The same page with differing lengths of content will always scroll to the same position, and the element will be rendered offscreen.

There is definitely only one element with the autofocus attribute set ($("[autofocus]").length).

Removing the autofocus attribute from the element does not cause the page to scroll at all (i.e. the page remains scrolled to the top - as expected).

Can anyone offer any help or insight?

Things we've tried

The following test works correctly:

<!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>
È stato utile?

Soluzione

We've recently retried this with Firefox and can't replicate the issue.

Closing...

Altri suggerimenti

You need css code to say this: .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; } Then the text input code to be this: <input class="form-control focusedInput" type="text">

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top