如果用户尚未保存表单，如何测试他们是否对表单进行了任何更改答案

【问题标题】：How to test if users has made any changes to a form if they haven't saved it如果用户尚未保存表单，如何测试他们是否对表单进行了任何更改
【发布时间】：2011-12-14 00:13:24
【问题描述】：

发布问题时与stackoverflow基本相同的功能，如果您开始写帖子然后尝试重新加载页面。您会收到一条 javascript 警告框警告消息。

我了解如何检查表单是否已更改，但下一步该怎么做。

I.E：离开页面时如何检查，在这里你会得到“这个页面要求你确认你想离开 - 你输入的数据可能不会被保存。”？

编辑：在这里找到另一个问题的正确答案https://stackoverflow.com/a/2366024/560287

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我很确定，如果您搜索“jQuery 检测表单更改插件”，您会发现比我即将编写的这个半伪代码更有用的东西：

formChanged = function(form) {
    form.find('input[type="text"], textarea').each(function(elem) {
        if (elem.defaultValue != elem.value) {
            return true;
        }
    });
    // repeat for checkbox/radio: .defaultChecked
    // repeat for ddl/listbox: .defaultSelected
    return false;
}

用法：

if (formChanged($('form')) { // do something }

请注意，这是为了检测原始渲染值的变化。例如，如果一个文本框的值 = "x"，并且用户将其更改为 "y"，然后将其更改回 "x"；这会将其检测为没有变化。

如果你不关心这种情况，你可以这样做：

window.formChanged = false;

$(':input').change(function() {
    window.formChanged = true;
});

然后你可以检查那个值。

【讨论】：

【解决方案2】：

是的，它是 JavaScript，因为 HTML 只是一种标记语言。

是的，jQuery 可以用于此。它比普通 JavaScript 更可取，因为它使事情变得更容易，尽管它确实增加了一些开销。

【讨论】：

它确实增加了一些开销，但它通常比你写的要好，弥补了（大部分）开销。

【解决方案3】：

有多种方法可以检查表单的任何控件是否已更改。

要检查默认值的更改，可以根据 defaultValue 属性检查大多数更改。对于单选按钮，您应该始终默认选中一个，因此请检查它是否仍处于选中状态。类似地，对于 selects，将 selected 属性设置为默认选项，看看它是否仍然被选中，等等。

或者，如果您的所有表单控件都有一个 ID 或唯一名称，您可以在加载时收集它们的所有值，然后在提交表单时检查它们的值。

另一种方法是监听每个表单控件上的更改事件，但这有点过头了。

这是一个与 rkw 的回答采用相同方法的 POJS 版本：

  /*
     Check if any control in a form has changed from its default value.

     Checks against the default value for inputs and textareas,
     defaultChecked for radio buttons and checkboxes, and 
     default selected for select (option) elements.

  */
  function formChanged(form) {
    var control, controls = form.elements;
    var tagName, type;

    for (var i=0, iLen=controls.length; i<iLen; i++) {
      control = controls[i];
      tagName = control.tagName.toLowerCase();
      type = control.type;

      // textarea
      if (tagName == 'textarea') {
        if (control.value != control.defaultValue) {
          return true;
        }

      // input
      } else if (tagName == 'input') {

        // text
        if (type == 'text') {
          if (control.value != control.defaultValue) {
            return true;
          }

        // radio and checkbox
        } else if (type == 'radio' || type == 'checkbox') {
          if (control.checked != control.defaultChecked) {
            return true;
          }
        }

      // select multiple and single
      } else if (tagName == 'select') {
        var option, options = control.options;

        for (var j=0, jLen=options.length; j<jLen; j++) {
          option = options[j];
          if (option.selected != option.defaultSelected) {
            return true;
          }
        }
      }
    }
    // Not really needed, but some like the return value to 
    // be a consistent Type
    return false;
  }

请注意，您需要小心选择元素。对于单选，您应该始终将一个选项设置为选中，就像没有默认选中一样，有些浏览器会选择第一个选项而其他浏览器不会。

【讨论】：