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

【问题标题】：HTML5 AutoFocus attribute causes Firefox to scroll to bottom of pageHTML5 AutoFocus 属性导致 Firefox 滚动到页面底部
【发布时间】：2017-12-21 23:21:50
【问题描述】：

我们有一个 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>

【问题讨论】：

您能否发布一个指向无法正常工作的测试的链接？
我在 Chrome 25 中也看到过这种行为
没有看到失败的地方，很难回答这个问题。类似的行为发生在我身上，因为我在页面底部呈现了带有自动对焦属性集的模式。即使模式没有激活，Firefox 也会滚动到自动聚焦的输入。
FF Bug

标签： firefox twitter-bootstrap autofocus

【解决方案1】：

我们最近用 Firefox 重试了这个问题，但无法重现该问题。

关闭...

【讨论】：

【解决方案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">

【讨论】：

除了，这实际上不会集中控制！