Question

我的表格每个都有大约100个输入字段（文本框，文本区域，收音机，复选框，文件等）。
当用户离开页面时，我需要知道是否已修改某些字段以运行自动保存例程。

1.-在任何字段更改时设置form_has_been_modified：

var form_has_been_modified = 0;
$("form[id^='my_form']").each(function(){
    $(":input", this).live("change", function() {
        form_has_been_modified = 1;
    });
});

2.-如果某个字段已更改，则警告用户：

window.onbeforeunload = function (e) {
    if ( ! form_has_been_modified){
        return;
    }

    var message = "This page is asking you to confirm that you want to leave - data you have entered may not be saved.";

    var e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = message;
    }

    // For Safari
    return message;
};

问题：

a.-这段代码（第1部分）是否会使浏览器的用户变得太慢？

b.-之前的代码运行良好。但是在textbox/textarea输入类型中，change事件仅在元素失去焦点时发生。因此，例如，此代码不能防止reload page操作。还有另一个更好的处理程序而不是change来解决这个缺陷吗？

Answer 1

这个怎么样

$('#form').data('serialize',$('#form').serialize());
  // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null;
    // i.e; if form state change show box not.
});

您可以使用Google JQuery Form Serialize功能，这将收集所有表单输入并将其保存在数组中。我想这个解释就足够了:)）

Answer 2

我会使用keyup，这可能足够接近，但你可能会得到一些误报。

此外，使用.on()，您可以通过一次调用替换.each()循环（并且.live()已弃用1.7+）：

$("form[id^='my_form']").on("change keyup", ":input", function() {
     form_has_been_modified = 1;
});

Answer 3

对于第一部分，您可能希望添加return false;以在找到更改的表单字段后中断循环...因此您不必费心地检查所有其余字段。当然，这是假设您只需知道任何字段是否已更改，而不是已更改的所有列表。鉴于此，如果字段＃2发生变化，为什么要花时间检查所有剩余的98个字段。

在卸载/离开页面之前检查给定表单中的更改

3 个答案: