4

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

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

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

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

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

4

2 回答 2

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

只要回调时机正确，这只会在您滚动后更改焦点。您需要发挥自己的魔力来确定要滚动到的内容，但这应该会给您想要的焦点行为。

于 2013-08-29T13:38:04.077 回答
0

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

正如 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;
        }
    }
});
于 2013-08-29T14:24:38.923 回答