Jquery 带表字段的制表键

我有一个使用JQuery和Jeditable在页面上创建可编辑文本元素的页面

在编辑元素时，我希望能够从一个元素切换到下一个元素

我不确定如何：

• 使用jIDTable或jquery捕获tab键事件（keycode=9）

• 一旦检测到该事件，将焦点移动到下一个元素并通过表激活它

---

谢谢你的帮助。谢谢

一种解决方案是让可编辑元素的容器进行侦听，甚至是文档。然后，查询文档或容器中的可编辑元素，确定哪个是当前编辑最多的元素，并移动到列表中的下一个元素，这是一项简单的任务。

我设法找到了一种方法：

$('div.editbox').bind('keydown', function(evt) {
    if(evt.keyCode==9) {
        $(this).find("input").blur();
        var nextBox='';
         if ($("div.editbox").index(this) == ($("div.editbox").length-1)) {
                nextBox=$("div.editbox:first");         //last box, go to first
            } else {
                nextBox=$(this).next("div.editbox");    //Next box in line
            }
        $(nextBox).dblclick();  //Go to assigned next box
        return false;           //Suppress normal tab
    };
});

在选项卡上，双击（此处设置为使用dblclick事件）发送到下一个框。如果它是最后一个编辑框（分配了一个唯一的类，我在选择器方面遇到了问题），它会转到第一个

我还使用了find（“输入”），因为我找不到另一个选择器来选择要模糊的表创建的输入

不是最优的，但它是有效的

$('div.edit').bind('keydown', function(evt) {
if(evt.keyCode==9) {
    var nextBox='';
    var currentBoxIndex=$("div.edit").index(this);
     if (currentBoxIndex == ($("div.edit").length-1)) {
           nextBox=$("div.edit:first");         
       } else {
            nextBox=$("div.edit").eq(currentBoxIndex+1);    
       }
    $(this).find("input").blur();
    $(nextBox).click();  
    return false;         
};
}); 

一定要检查这个

---

它将帮助您

只需稍微添加一点-如果您的可编辑字段嵌套在其他元素中，则“nextBox=$（this）.next（“div.editbox”）；”不会工作，所以创建一个“目标”元素数组并从内部工作

$('.editable_textarea').bind('keydown', function(evt) {
    if(evt.keyCode==9) {
        $(this).find("input").blur();
        // create an array of targeted jeditable fields
        var boxArray = $("#parent_element").find('.editable_textarea')
        var nextBox = '';
        if ($('.editable_textarea').index(this) == ($('.editable_textarea').length-1)) {
            nextBox = $(".editable_textarea:first");         //last box, go to first
        } else {
            // use the index of the active field to find the next one in the boxArray
            nextBox = boxArray[$('.editable_textarea').index(this)+1];    //Next box in line
        }
        $(nextBox).click();  //Go to assigned next box
        return false;           //Suppress normal tab
    };
});

---

谢谢，但是绝地表元素似乎没有响应focus（），这也是问题的一部分。我不知道如何告诉Jeitable将焦点放在某个元素上；或者，我可能需要模拟双击？但是“tab”的通用侦听器不是一个坏主意。有人能让它工作吗？表结构需要是什么样的ids/classes ETC配置出来这个示例不适用于datatables。必须将div切换到td，并将editbox添加到td，将lastedbos添加到最后一个tdHi Mike，我已经在你的问题下回答了：嘿@SylvanK我需要你的脚本帮助。你能帮帮我吗？另请参阅问题Hassan，这是我自己用上述解决方案解决其他用户问题的代码。