Question

我有一个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中的表格（以便新的选定单元格可见），但是不会触发滚动事件，也不会更改滚动条，因此即使选择了表格中右下方的单元格，滚动条位置仍然就像是选择了左上角的单元格一样。有没有什么办法解决这一问题？或者我应该手动跟踪单元格选择并自己更新滚动位置？

更改聚焦元素时触发滚动事件

0 个答案: