JQuery DataTable键盘按键事件

Question

JQuery DataTable键盘按键事件

5

我在使用JQuery DataTable时遇到了捕获keydown事件的问题。我的目标是允许用户使用箭头键导航表格的行。因此，我想捕获keydown事件，并在用户按下箭头键时移动表格的选定行（这是我在datatable外部使用选定行类来跟踪的）。但是，我似乎无法捕获keydown事件。

例如，下面的代码不起作用：

$('#myTable tbody').keydown(function (event){...});

我的想法是问题在于表格没有焦点，但也许这条路不对。例如，即使我添加以下内容，仍然无法使用上述代码捕获keydown事件：

 $('#myTable tbody').click(function(e){ $('#myTable tbody').focus();});

我可��使用$(document)捕获keydown事件，但这样做并不理想。

谢谢。

- JDG

你想做什么？你是否正在寻找一个委托处理程序，例如：`$('#myTable').on('keydown', 'input', function(ev){ ... });`我不确定为什么你要把焦点放在表格本身上，我猜你想聚焦于表格中包含的某些内容。你能详细说明一下吗？ - BLSully

我改进了我的描述，以更好地说明我尝试做什么。我试图让焦点集中在表格上，以便使表格捕获按键事件，但这可能是不必要的。我只想允许用户使用箭头键浏览表格的行（所选行用于填充不同窗格上的数据）。 - JDG

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BLSully · Accepted Answer

这里是一个可行的解决方案……代码可以再清理一下（而且存在一些错误，例如没有限制检查），不过效果是有的： http://jsfiddle.net/BLSully/Xdkea/ "关键"在于给表格分配一个tabindex，使其变得“可聚焦”。它不需要为零，但需要为“某个值”，以便按键事件在其上起作用。

<table id="myTable" tabindex=0>
    <tbody>
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>Row 3</td></tr>
        <tr><td>Row 4</td></tr>
        <tr><td>Row 5</td></tr>
    </tbody>
</table>

JavaScript：

$(function(){
    var focusedRow = null;
    $('#myTable').on('keydown', function(ev){
        console.log(ev.keyCode);
        if(focusedRow == null) {
            focusedRow = $('tr:nth-child(1)', '#myTable');
        } else if(ev.keyCode === 38) {
            focusedRow.toggleClass('focused');
            focusedRow = focusedRow.prev('tr');
        } else if(ev.keyCode === 40) {
            focusedRow.toggleClass('focused');
            focusedRow = focusedRow.next('tr');
        }
        focusedRow.toggleClass('focused');
    });
    $('#myTable').focus();
});