如何在焦点更改时停止浏览器自动滚动容器

Question

当您在浏览器中的输入字段之间切换时，浏览器将自动滚动最近的父容器以将下一个聚焦字段放置在视图中。

简单的 JSFiddle：http://jsfiddle.net/TrueBlueAussie/pxyXZ/1/

$('.section').eq(6).find('input').focus();

例如，如果您打开上面的小提琴，它会选择黄色窗口底部的“示例项目 7”。如果按 Tab 键，“示例文本 8”字段会向上跳到父窗口的中间。

显然，这对于普通网站来说是一件好事，但我有一个自定义滚动容器，我可以在其中手动定位和滚动所有内容。我正在跟踪焦点变化，并将使用动量滚动器将其带入视图，但如何禁用网络浏览器的默认滚动行为？乐意接受 CSS、Javascript 或 JQuery 解决方案。

Answer 1

事实证明，由于事件发生的顺序错误，因此您无法平滑滚动焦点更改。在设置焦点之前，将字段滚动到视图中时，您会遇到严重的延迟。我们所希望的就是屏幕上项目的更好移动或超快滚动。

正如 PlantTheIdea (+1'ed) 所建议的，您需要抓住 TAB 键并找到下一个可聚焦的项目，将其置于视图中，然后将焦点设置到它。

在实践中，有很多问题需要解决：

• 焦点改变发生在 TAB 键按下（而不是键盘按下）时。
• 仅匹配非隐藏输入（许多网络应用程序都有隐藏字段，如果您尝试聚焦它们，这些字段将会爆炸）。
• 允许选择从页面上的第一个或最后一个项目跳出（否则浏览器将无法跳到其地址栏）
• 用于e.keyCode || e.which允许旧版浏览器
• 在文档级别捕获事件以允许滚动区域之外的其他输入的情况，导致其进入滚动区域（第一个或最后一个输入）。

最终代码如下所示：

$(document).on('keydown', ':focus', function (event)
{
    if ((event.keyCode || event.which) == 9)
    {
        var $inputs = $(":input:not(hidden)")
        var index = $inputs.index(this);
        // Index previous or next input based on the shift key
        index += event.shiftKey ? -1 : 1;
        // If we are in the range of valid inputs (else browser takes focus)
        if (index >= 0 && index < $inputs.length)
        {
            var $next = $inputs.eq(index);
            event.preventDefault();
            // Move, not scroll, to the next/prev item....
            MoveIntoView($next);
            $next.focus();
            return false;
        }
    }
});