jquery - 是否可以使用键（PgUp，PgDn，...空格键？...）控制可滚动的 jquery ui 对话框

Question

我有一个 jQuery UI 对话框，它有足够的内容来触发垂直滚动条的出现。我发现使其滚动的唯一方法是单击并拖动滚动条，或单击滚动条区域 - 即无法使用 PgUp 或 PgDn 键使其滚动，也无法使用箭头键或空格键等。启用键盘激活滚动的最佳方法是什么？

[注意：我实际上使用的是 jQuery UI 对话框的增强版本（http://www.fieryprophet.com/demo/jqui-dialog-minmax/），但发现与普通对话框相同的问题。]

Answer 1

这可以通过将属性tabindex添加到对话框容器div来实现，以使其接受关键​​事件。例如：

<div id="dialog" tabindex="-1">
  very much content here ...
</div>

您还可以将其添加到对话框的open方法中：

$('#dialog').dialog({
    open: function(e, ui) {
        var $dlg = $(e.target);
        if ($dlg.is(':visible')) {
            $dlg.focus();
        }
    }
});

有关工作示例，请参阅此JSFiddle 。（当然，在 JSFIddle 中设置焦点并不像在独立页面中那样真正起作用）。

请参阅.focus()的文档：“尝试将焦点设置到隐藏元素会导致 Internet Explorer 出错。 ”。

有关tabindex="-1*作用的详细说明，请参阅“使用 Tabindex 使元素具有焦点” 。

Answer 2

您可以将事件处理程序绑定到keyup窗口的事件，如果按下的键是 PgUP 或 PgDown 或您决定的任何内容，您可以滚动对话框。像这样的东西：

$(window).keydown(event) {
    event.preventDefault();
}

$(window).keypress(event) {
    event.preventDefault();
}

$(window).keyup(function(event) {
    event.preventDefault();

    var curScroll = $("#content").scrollTop();

    switch(event.which) {
        case 32:
        case 34:
            curFocus.scrollTop(curScroll + 100);
            break;
        case 33:
            curFocus.scrollTop(curScroll - 100);
            break;
    }
});

我做了一个jsFiddle来更好地解释我的解决方案。

编辑：添加event.preventDefault()到键盘事件处理程序以避免页面滚动。

更新：显然对话框不会引发简单focus或blur事件，正文也不会。我添加了一些指令以仅使焦点元素可滚动，或者如果没有则窗口。

var curFocus = $(window);

$("#content").on("dialogfocus", function() {
    curFocus = $(this);
});

$("body").click(function(event) {
    if((event.target) != $("#content")[0])
        curFocus = $(window);
});