javascript - jquery tablesorter滚动条: how set focus to scroll by keydown

Question

抱歉我的英语不好。

我正在使用tablesorter 2.0和scroller。

我在我的页面上调用。当我插入 table 时，它可以通过按键滚动。但我不想按 table 。实际上是通过加载页面来实现的。

set $("#tableStockSLI").focus() 不起作用。我怎样才能做到这一点？

<script type="text/javascript" src="/public/javascripts/jquery-1.11.1.js"></script>
<script type="text/javascript" src="/public/javascripts/jquery-ui-1.11.1/jquery-ui.js"></script>


<script type="text/javascript" src="/public/javascripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/public/javascripts/jquery.tablesorter.widgets-filter-formatter.js"></script>
<script type="text/javascript" src="/public/javascripts/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="/public/javascripts/widget-scroller.js"></script>

            $("#tableStockSLI").tablesorter({
                theme: 'blue',
                widthFixed : true,
                showProcessing: true,                     
               widgets: [ "zebra","filter", "scroller"],
                widgetOptions : {
               	 scroller_height : 300,
               	 scroller_upAfterSort: false,
                    scroller_jumpToHeader: false
                },


               sortList: [[1,0],[2,0]]

            });

Answer 1

要为滚动条 div 提供焦点，您只需为滚动条容器 (tablesorter-scroller-table) 提供一个 tabindex。试试这个代码(demo):

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widthFixed: true,
        showProcessing: true,
        widgets: ["zebra", "filter", "scroller"],
        widgetOptions: {
            scroller_height: 200,
            scroller_upAfterSort: false,
            scroller_jumpToHeader: false
        },
        sortList: [[1, 0],[2, 0]],
        initialized: function(){
            // give scroller a tabindex to allow focusing
            $('.tablesorter-scroller-table').attr('tabindex', 1);
        }
    });

    $(document).on('keydown', function(){
        // keyboard pageup/down now always works in scroll window
        $('.tablesorter-scroller-table').focus();
    });
});