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

How to test if users has made any changes to a form if they haven't saved it

本文关键字：用户 表单 是否 任何更 测试 保存 如果 何测试      更新时间：2023-09-26

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

我知道如何检查表单是否已更改，尽管我如何做下一步。

。E:当我离开这个页面时，我怎么检查这个，在这里你得到"这个页面要求你确认你想离开-你输入的数据可能不会被保存。"

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

我敢肯定，如果你搜索"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";这将检测为NO。

如果你不关心这个场景，你可以这样做:

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

然后你可以检查这个值

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

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

有很多方法可以检查表单的控件是否发生了变化。

要检查默认值的更改，大多数可以根据defaultValue属性进行检查。对于单选按钮，默认情况下应该总是选中一个，因此检查它是否仍处于选中状态。类似地，对于选择，为默认选项设置selected属性，并查看它是否仍然被选中，依此类推。

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

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

这是一个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;
  }

注意，您需要小心选择元素。对于单个选择，你应该总是设置一个选项为选中，因为如果没有默认选择，有些浏览器会选择第一个选项，而其他浏览器则不会。

相关文章：