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

Question

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

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

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

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

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

Answer 1

这只是基于我上面的评论：

$('input').on('keyup',function(e){
    if(e.keyCode === 9) {
        var $this = $(this);
        // (do your scroll thing here
        // ..., function(){
            $this.parent().next().find('input').focus();
        // });
    }
});

只要回调时间是正确的，这只会在你已经滚动后改变焦点。你需要自己变魔术来决定滚动到什么位置，但这应该会给你想要的焦点行为。

Answer 2

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

正如PlantTheIdea（+1'ed）所建议的那样，你需要抓住TAB键，找到下一个可聚焦的项目，将其放在视图中，然后将焦点设置为它。

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

• 焦点的更改发生在TAB键向下（而不是向上）上
• 只匹配非隐藏的输入（许多网络应用程序都有隐藏的字段，如果你试图集中它们，这些字段会爆炸）
• 允许所选内容从页面上的第一个或最后一个项目制表（否则浏览器将无法制表到其地址栏）
• 使用e.keyCode || e.which允许使用较旧的浏览器
• catch事件，以允许在滚动区域之外的其他输入的情况下，使其进入滚动区域（第一个或最后一个输入）

最后的代码如下所示：

$(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;
        }
    }
});