Simple JSFiddle：http://jsfiddle.net/TrueBlueAussie/pxyXZ/1/

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

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

显然这对于普通网站来说是件好事，但我有一个自定义滚动容器，我在其中定位＆amp;手动滚动一切。我正在跟踪焦点更改并将使用动量滚动器将其置于视图中，但如何禁用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 keydown（非keyup）上。
只匹配非隐藏的输入（如果你试图将它们集中在一起，很多网页应用都有隐藏的字段会爆炸）。
允许选择标签关闭页面上的第一个或最后一个项目（否则浏览器将无法选项卡到其地址栏）
使用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;
        }
    }
});

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

Simple JSFiddle：http://jsfiddle.net/TrueBlueAussie/pxyXZ/1/

2 个答案:

最终代码如下：