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 出现错误。”。

请参阅“Making Elements Focusable with Tabindex ”，了解 tabindex="-1* 的作用的详细说明。