jQuery jEditables 在选项卡上提交

Question

我正在使用 jQuery 和可编辑插件创建内联可编辑表格。

到目前为止它运行良好，但只会在按 ENTER 后提交并保存到数据库。我在这里找到了一个线程，它帮助我在框之间切换，但按下 TAB 时它不会提交数据。

允许我在框之间切换的代码如下：

$('.editScheduleRow').bind('keydown', function(evt) {

    if (evt.keyCode==9) {

        var nextBox='';
        var currentBoxIndex=$(".editScheduleRow").index(this);

        if (currentBoxIndex == ($(".editScheduleRow").length-1)) {
            nextBox=$(".editScheduleRow:first");         //last box, go to first
        } else {
            nextBox=$(".editScheduleRow").eq(currentBoxIndex+1);    //Next box in line
        }

        $(this).find("input").blur();
        $(nextBox).click();  //Go to assigned next box

        return false;           //Suppress normal tab

    };

});

要使用 ENTER 提交，我使用这个：

$(".editScheduleRow").editable("../../includes/ajax/save-schedule-row.php", {

    "submitdata": function ( value, settings ) {
        return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id') };

    },

});

我还发现了一个带有建议的线程，但它对我不起作用：jEditable submit on TAB as well as ENTER

如果您需要更多信息，请告诉我。

Answer 1

我最初的答案是基于阅读 jQuery Editable 的文档，这是一个 jQuery 扩展，名称相似，但与问题中的 jEditable 不同。让我们用正确的库再试一次。

问题是您在按 Tab 时将焦点从输入框移开，但是当焦点从输入框移开时，它不会保存内容。为了说明这一点，请尝试以下操作：单击其中一个字段并对其进行编辑，然后单击文档上的其他位置。您将在表中看到该值 - 这就是您在元素上使用 blur() jQuery 函数模拟的内容。

有（再次）两种方法可以解决这个问题。首先，我们可以修改程序在字段失去焦点时的行为：

    [..]
    "submitdata": function ( value, settings ) {
        return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id') 
    };
    "onblur": "submit";
},
[..]

这样做的效果是，在进行我上面描述的实验以帮助您了解它为什么不起作用时，您现在还会看到它被保存了。这可能不是你想要的。在这种情况下，您可以确保触发提交而不是模糊：

替换这一行：

    $(this).find("input").blur();

这个：

    $(this).find("form").submit();

现在实验将不再导致值发生变化，但它不再是对我们正在做的事情的准确模拟，当按下 Tab 时，值会发生变化。