带有 JEditable 字段的 Tab 键答案

【问题标题】：Tab key with JEditable fields带有 JEditable 字段的 Tab 键
【发布时间】：2009-05-19 23:59:36
【问题描述】：

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

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

我不确定如何：

使用 jeditable 或 jquery 捕捉 tab 键事件（keycode = 9）
一旦检测到该事件，将焦点移至下一个元素并通过 jeditable 激活它

任何帮助表示赞赏。谢谢！

【问题讨论】：

另见问题stackoverflow.com/questions/3890775/…

标签： jquery key tabs jeditable

【解决方案1】：

我设法找到了一种方法：

$('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
    };
});

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

我还使用了 find("input")，因为我无法找到另一个选择器来选择 jeditable 创建的输入进行模糊处理。

不是最佳的，但它有效。

【讨论】：

有人能用它吗？什么是表结构需要像 ids/classes 等
发现此示例不适用于数据表。必须将 div 切换到 td 并将编辑框添加到 td 和 lasteditbos 到最后一个 td
嗨，迈克，我已经根据您的问题回复了：stackoverflow.com/questions/3890775/…
嘿@SylvanK 我需要你的脚本帮助。请问你能帮帮我吗？ stackoverflow.com/questions/14303023/…

【解决方案2】：

$('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;         
};
});

检查一下它会帮助你

【讨论】：

Hassan，这是我自己的代码，通过上面的解决方案解决了另一个用户的问题。 stackoverflow.com/questions/3890775/…

【解决方案3】：

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

【讨论】：

谢谢，但 jeditable 元素似乎没有响应 focus()，这是问题的一部分。我不知道如何告诉 jeditable 将焦点放在一个元素上；或者我可能需要模拟双击？但是“标签”的通用监听器并不是一个坏主意。

【解决方案4】：

只是一个小小的补充——如果你的 jeditable 字段嵌套在其他元素中，'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
    };
});

【讨论】：