1

我有一个启用键盘导航的 html 表：表中的每个 td 都有 tabIndex="1"，我为每个 td 的 onkeydown 事件添加了处理程序。在处理程序中，我计算 keydowned 的 td 行和列号，根据按下的箭头键计算新的行/列号，然后执行 focus()。这是功能：

function pivotKeyDown(event, element) {
    var elementToSelect = event.srcElement ? event.srcElement : (event.target ? event.target : event.toElement);
    var row, col, t = $(elementToSelect);
    currentCol = t.index();
    currentRow = t.closest('tr').index();

    switch (event.keyCode) {
        case 37:
            t.closest('table').find('tr:nth-child(' + (currentRow + 1) + ')').find('td:nth-child(' + (currentCol) + ')').focus();
            break;
        case 38:
            t.closest('table').find('tr:nth-child(' + (currentRow) + ')').find('td:nth-child(' + (currentCol + 1) + ')').focus();
            break;
        case 39:
            t.closest('table').find('tr:nth-child(' + (currentRow + 1) + ')').find('td:nth-child(' + (currentCol + 2) + ')').focus();
            break;
        case 40:
            t.closest('table').find('tr:nth-child(' + (currentRow + 2) + ')').find('td:nth-child(' + (currentCol + 1) + ')').focus();
            break;
    }
    return false;
}

表格通常太大而无法在页面上显示，因此如果表格太大，则将其放置在显示滚动条的 div 中。

现在，问题是当我使用键导航时，焦点单元格会发生变化，当我越过视口边界时，它会将表格移动到 div 内（以便新选择的单元格可见），但它不会触发滚动事件，它不会改变滚动条，因此即使选择了表格中的右下角单元格，滚动条的位置仍然就像选择左上角的单元格一样。有没有什么办法解决这一问题？或者我应该手动跟踪单元格选择并自己更新滚动位置？

4

0 回答 0