0

我让 jEditable 可以很好地使用 textarea 来编辑对象内的内容。我正在使用 jEditable 的 onblur 选项直接将 onBlur 提交给函数（而不是 url），并且所有工作都按预期工作，除非您使用例如 alt+tab 更改窗口。当我使用 alt+tab 时，看起来内容是通过实际的 http 请求提交的，而忽略了我的回调函数。

我非常基本的示例实现如下所示：

$(".editable").editable(function(content,settings){
        content = content.replace(/\n/gi,"<br />");
        return content;
    },{
    data: function(value, settings) {
        return value.replace(/<br[\s\/]?>/gi, '\n');
    },
    type: "textarea",
    onblur: "submit"
});​

你可以在这里测试它：http: //jsfiddle.net/xmajox/wePp5/

我已经尝试过所有其他窗口操作：调整大小、移动等，甚至在浏览器上的选项卡之间移动都效果很好（提交数据并退出编辑模式）。

关于如何驯服它的任何想法？

更新：经过更多测试和其他人的一些合作，这似乎取决于操作系统（窗口管理器？）。它在统一的 ubuntu 12.10 上始终如一地发生，但在 mac 或 windows 上没有发生（尚未测试其他 linux 机器）。

此外，现在证明当我使用 alt-tab 时我的回调方法确实运行，但之后表单还是会被 POST。添加实时 preventDefault 似乎没有帮助。

4

1 回答 1

0

找到了解决方法，但不太明白为什么会在这种特定情况下发生。

首先，我必须是世界上（不）最幸运的人，因为我已经尝试了 10 次其他组合并且没有这个问题，我唯一能做到的地方是：

 Ubuntu 12.10 (with Unity) and Chrome (v22 at the time of this post)

免责声明：这并不意味着它不会在其他地方发生，我只是无法在我测试的那些（或请朋友测试）上重现它。

问题： 当焦点丢失时，jEditable - 从版本 1.7.1 开始 - 在实际执行任何操作之前设置超时（默认为 200 毫秒），以根据源中的注释防止重复操作。如果您（使用上述浏览器/操作系统组合）在触发超时之前（也就是在提交数据并运行您的方法之前）将 alt+tab 退出浏览器窗口，它将强制使用数据进行 POST 请求，完全忽略preventDefaults 或返回 false。如果你按下 alt 就不会出现这个问题...保持按下状态（超过 200 毫秒，即有足够的时间触发超时），然后按下 alt 移开。

解决方案： 我编辑了 jEditable 的源代码以减少超时（甚至删除它）。所以我在第 280 行附近，上面写着：

(...)
    input.blur(function(e) {
         // prevent double submit if submit was clicked 
         t = setTimeout(function() {
              form.submit();
         }, 200);
    });
(...)

我将其更改为：

(...)
    input.blur(function(e) {
        form.submit();
    });
(...)

注意： 我删除了这个，因为在我的情况下（仅在模糊上提交 textareas 并且没有任何其他允许用户提交数据的控件）我无法重现 Mika Tuupola 在评论中提到的双重提交问题。如果您有文本输入字段（按 Enter 键提交）且提交 onBlur 处于活动状态，您可能会陷入这种情况。在这些情况下，我建议您减少超时或干脆避免使用 onBlur 提交。

于 2012-10-25T15:04:28.333 回答