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

Question

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

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

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

例如，如果您打开上面的小提琴，它会在黄色窗口的底部选择“Sample item 7”。如果按 Tab，“Sample text 8”字段会向上跳到父窗口的中间。

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

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 允许使用旧版浏览器
• 在文档级别捕获事件以允许在滚动区域之外的其他输入的情况下，使其进入滚动区域（第一个或最后一个输入）。

最终代码如下所示：

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