自定义箭头键导航无法正常工作（部分工作）

Posted 2023-05-07

【中文标题】自定义箭头键导航无法正常工作（部分工作）

【英文标题】：Custom arrow key navigation not working properly (one part works)

【发布时间】：2015-08-26 19:22:54

【问题描述】：

我有一个带有动态添加行的大型 html 表。

表格具有标准结构（包括thead、tbody 和tfoot）。

在此表中，有可编辑的 TD（具有 class "editable" 并包含 contenteditable div）和不可编辑的 TD（没有“可编辑”类并且没有包含一个div）。

我正在尝试创建一个自定义箭头键导航，允许我从一个可编辑的 TD 跳转到下一个或上一个（就像在 Excel 表格中一样）。

为了对此进行测试，我使用了以下示例，但这只是部分工作，即警报显示正确，但我无法对相应的 div 执行任何操作（例如更改其背景或添加文本等）。

谁能告诉我我在这里做错了什么？

我的 jQuery（已准备好文档）：

$(document).keydown(function(e)
    switch(e.which)
        case 37: // left arrow
            alert('test left');
            $(this).closest('td').prevUntil('td.editable').find('div').text('test');
            break;
        case 39: // right arrow
            alert('test right');
            $(this).closest('td').nextUntil('td.editable').find('div').text('test');
            break;
        default: // exit for other keys
            return;
    
    e.preventDefault(); // prevent default action
);

我的 HTML（示例行）：

<tr>
    // ...
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td></td> <!-- non-editable -->
    <td></td> <!-- non-editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    // ...
</tr>

【问题讨论】：

请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”！

【参考方案1】：

您的代码中的this 指的是document 不是单个元素

如果你使用$(e.target)，你可以获得单个元素

另外你应该使用next()函数而不是nextUntil()

$(e.target).closest('td').nextAll('td.editable:first').find('div').text('test');

【讨论】：

非常感谢！如果所有 TD 都是可编辑的，但如果中间有不可编辑的 TD，则此方法无效 + 它似乎不适用于跨 TR，即从一行中的最后一个可编辑 TD 跳转到下一行中的第一个。对此有什么想法吗？

谢谢 - 让我检查一下。 :)

现在这可以在一行内工作，但当您位于行尾并需要跳转到下一行等时仍然不行。

如果你想在行之间跳转，实现向上/向下按钮会更容易。如果你想用右键移动到那里，你必须有条件地检查它是否是行中的最后一项，然后选择下一行中的第一项

有道理。我将尝试实现条件检查，因为我认为如果用户在使用箭头键时不必切换箭头键，这对用户来说会更容易。再次感谢！