Question

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

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

Answer 1

可以通过将 tabindex 属性添加到对话框容器 div 来使其接受关键事件。 E.g：

<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中设置foucs并不像在独立页面中那样工作。）

请参阅.focus()的文档：＆＃34; 尝试将焦点设置为隐藏元素会导致Internet Explorer出错。＆＃34;。

参见＆＃34; Making Elements Focusable with Tabindex＆＃34;有关 tabindex =＆＃34; -1 * 的详细描述。

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

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

2 个答案: