0

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

表格比较大，一般有30个或更多的字段。以前，我只是简单地使用 Coldfusion 进行检查，方法是根据他们所在的页面类型（新建与编辑）在 url 中传递一个简单的变量，但显然随着事情变得越来越复杂，这种基本方法并不令人满意。

它必须是动态的。

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

简单地对字段使用 onChange 属性是行不通的，因为很多人已经将它用于某些功能。

我试过弄乱一些不同的脚本，其中许多涉及 $(":input") 过滤器。

这个小提琴在这里：http: //jsfiddle.net/AFahj/50/

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 之前的垃圾（上）。

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

那么我将如何创建一个脚本来观察是否已编辑任何输入（即使它们有很多）并执行适当的操作？

4

1 回答 1

2

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

它选择所有表单输入，包括选择框、文本区域和其他输入。

在过去，我使用过这样的片段。

   // 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);
于 2013-04-19T19:50:29.813 回答