javascript - 从页面底部到顶部切换时，焦点在导航栏后面丢失

Question

对于我们的 Intranet 站点，我们使用的是引导导航栏，该导航栏位于浏览器顶部的固定位置。在此特定页面上，用户将希望通过两列输入字段水平制表符。

铬合金

然而，在 Chrome 中，当用户从一列的底部切换到下一列的顶部时，浏览器会通过将滚动条移动到最顶部来适应用户，从而允许用户查看当前焦点在哪个字段上. 这是一个屏幕截图，显示了我的意思：

IE浏览器

然而，在 IE（版本 8、9 和 10）中，输入字段被移动到浏览器的最顶部，并在导航栏后面丢失，如下所示：

当焦点设置在第二列的顶部输入字段时，有没有办法在语法上调整 IE 滚动条的位置？

Answer 1

如果将类first-input应用于导致此问题的每个输入，则此 JS/jQuery 代码可能会有所帮助。

$(window).keyup(function(event) {              // Catch all keyboard events
  if (event.keyCode == 9) {                    // We only care about the TAB Key
    var $activeEl = $(document.activeElement); // Get the currently focused element
    if ($activeEl.hasClass('first-input')) {   // If the element is a first-input...
      console.log("We hit a first-input, adjust scroll.");
      $(window).scrollTop($(window).scrollTop() - 50);     // Adjust scroll
    }                                                      // You can increase the number
  }
});

可能有一种方法可以检查它是否是第一个输入（除了使用硬编码的类名）——但这是我想到的最快的事情。