Question

我们有一个带有Twitter Bootstrap的HTML5应用程序（<!DOCTYPE html>）和各种其他JavaScript库（包括jQuery） - 所有这些都在当前版本上运行。

该页面包含一个文本输入，其中设置了autofocus属性。

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

该页面包含多个“屏幕”内容，这意味着页面上始终会有一个垂直滚动条。文本输入位于页面的第一个“折叠”内，约。从页面顶部250px。

在Chrome，Safari和Opera上，该页面按预期工作。页面加载时，元素在屏幕上并聚焦。

在FireFox（当前版本 - 18.0.1）上，元素具有焦点，但页面已滚动到1533px（通过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>

Answer 1

我们最近使用Firefox对此进行了重试，无法复制此问题。

...结算

Answer 2

你需要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">

HTML5 AutoFocus属性导致Firefox滚动到页面底部

我们尝试过的事情

2 个答案: