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不同。让我们再试一次正确的库。

问题是当您按下标签时，您将焦点从输入框移开，但是当焦点远离它时，它不会保存内容。为了说明这一点，请尝试以下操作：单击其中一个字段并对其进行编辑，然后单击文档上的其他位置。您将看到表中的值 - 这就是您在元素上使用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键时，值将被更改。

jQuery jEditables在Tab上提交

1 个答案: