Question

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

我知道如何检查表单是否已更改，但我该如何进行下一步。

I.E：如何离开页面时检查此信息，此处显示“此页面要求您确认是否要离开 - 您输入的数据可能无法保存。”？

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

Answer 1

我非常肯定，如果你搜索'jQuery detect form change plugin'，你会发现比我要编写的半伪代码更有用的东西：

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

然后你可以检查那个值。

Answer 2

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

是的，jQuery可以用于此。它优于vanilla JavaScript，因为它会使事情变得更容易，但它会增加一些开销。

Answer 3

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

要检查默认值的更改，可以针对 defaultValue 属性检查大多数更改。对于单选按钮，默认情况下应始终选中一个，因此请检查它是否仍处于选中状态。同样，对于选择，请为默认选项设置所选属性，并查看它是否仍处于选中状态，依此类推。

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

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

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

  /*
     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;
  }

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

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

3 个答案: