Question

使用我们为当地商会制作的一个相当大的自定义后端系统，我们需要的一件事就是阻止他们点击子表单链接（在单独的页面上发布）来填充内容并丢失他们在此之前输入的更改或信息。

表格相当大，一般有30个或更多字段。以前我只是使用Coldfusion进行检查，根据它们所处的页面（New vs Edit）在url中传递一个简单的变量，但显然随着事情变得越来越复杂，这种基本方法并不令人满意。

它必须是动态的。

所以基本上，如果用户在编辑页面上进行任何更改并尝试在业务地址部分中单击“添加新地址”，它将检测所做的更改（硬部分），并将禁用链接（这是简单的部分）添加一个新地址，直到他通过提交（循环回到同一页面）保存主表单。

简单地使用字段的onChange属性是行不通的，因为很多人已经将这个用于某个功能或其他功能。

我曾尝试搞乱一些不同的脚本，其中许多涉及$（“：input”）过滤器。

var propertyChangeUnbound = false;
$("#testbox").on("propertychange", function(e) {
    if (e.originalEvent.propertyName == "value") {
        alert("Value changed!");
    }
});

$("#testbox").on("input", function() {
    if (!propertyChangeUnbound) {
        $("#testbox").unbind("propertychange");
        propertyChangeUnbound = true;
    }
    alert("Value changed!");
});

这个小提琴代码分为两部分。一个用于更现代的浏览器（更低）和更旧的IE9前的垃圾（上层）。

它展示了我想要的基本功能，但问题在于表格本身的范围。它们很庞大。我需要一些足够灵活的东西来运行并在单个脚本中获取所有输入，并准备好根据更改执行操作。

那么我如何创建一个单一的脚本来监视是否有任何输入被编辑（即使有很多输入）并执行适当的操作？

Answer 1

jQuery的伪选择器:input是你的朋友。

它选择所有表单输入，包括选择框，textareas和其他输入。

过去我使用过这样的代码片段。

   // give 500 ms delay before detecting changes to allow
   // allow programmatic changes to input values
   setTimeout(function() {
           $(":input").on('keydown change', function(e) {
                   // when the change happens attach your event to deal with it
                   $(window).on('beforeunload', function(e) {
                           return "It seems you have unsaved changes.  If you continue they will be lost";
                   });

                   // then remove the change detection (since we know it has changed already
                   $(":input").off('keydown change');
           });

           // Allow the thing to happen in certain circumstances.
           $("form").on('submit', function() {
                   $(window).off('beforeunload');
           });
   }, 500);

如何查看是否有任何字段已更改值，警告用户未保存的更改

1 个答案: