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

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

表单相当大，通常为30个或更多字段。之前，我只是使用Coldfusion进行了一次检查，通过在url中传递一个简单的变量，该变量基于他们所处的页面类型（新建vs编辑），但很明显，随着事情变得越来越复杂，这种基本方法并不令人满意

它必须是动态的

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

简单地为字段使用onChange属性是行不通的，因为很多人已经将其用于某些函数或其他函数

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

这把小提琴：

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

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

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

jQuery的伪选择器是您的朋友

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

在过去，我用过这样一个片段

   // 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);

   // 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);