Question

我有一个表单，我想跟踪任何更改。现在我已将其设置为当用户退出页面时，会显示一个警告框，说明对表单进行了多少更改。然而，它一直在注册0.我已经通过向inputChanges函数添加警报来测试，告诉我发生了更改并且警报触发，但是当我退出页面时，计数仍然注册为0 ...

这是我的剧本：

window.onload = function() {
    var totalChanges = "";
    var inputHandles = 0;
    var selectHandles = 0;
    var textAreaHandles = 0;

window.onbeforeunload = function(){
    alert("Total Form Changes:" + totalChanges);
}//onbeforeunload

   var totalChanges = inputHandles + selectHandles + textAreaHandles;

   function inputChanges() {
   inputHandles++; 
   alert("Change");
   }

   var inputs = document.getElementsByTagName("input"); 
   for (i = 0; i < inputs.length; i++){
    inputs[i].onchange = inputChanges;
   }    

   function selectChanges(){
   selectHandles++;
   }

   var selects = document.getElementsByTagName("select");
   for (i = 0; i < selects.length; i++){
   selects[i].onselect = selectChanges;
  }

  function textAreaChanges(){
   textAreaHandles++;
  }

   var textAreas = document.getElementsByTagName("textarea");
  for (i = 0; i < textAreas.length; i++){
   textAreas[i].onchange = textAreaChanges;
  }
}//Onload

Answer 1

您在此声明totalChanges：

var totalChanges = "";

...然后在此重新声明：

var totalChanges = inputHandles + selectHandles + textAreaHandles;

...此时您添加的内容全部为0。

您需要在需要值的位置进行计算：

window.onbeforeunload = function(){
    totalChanges = inputHandles + selectHandles + textAreaHandles;
    alert("Total Form Changes:" + totalChanges);
}

或者先设置totalChanges = 0，然后每当其他变量发生变化时再增加它，但那就更笨拙了。

另请注意，您并未统计现在具有与其起始值不同的值的字段数，而是计算单个编辑的数量。因此，如果用户更改字段两次并且第二次更改返回到原始值，则代码将跟踪两次更改（逻辑上它是零变化时）。

Answer 2

由于用户可以将值更改回原来的值，我建议您将所有input.value与input.defaultValue进行比较并检查select.options[select.selectedIndex]defaultSelected

您也可以将}和警报移到总变化总和之后

类似这样的事情

window.onload = function() {
  var totalChanges = 0;


  window.onbeforeunload = function(){
    var inputs = document.getElementsByTagName("input"); // ditto for "textarea"
    for (var i = 0; i < inputs.length; i++){
      totaChanges +=  inputs[i].value != inputs[i].defaultValue;
    }    
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++){
      totalChanges += !selects[i].defaultSelected;
   }

    alert("Total Form Changes:" + totalChanges);
  }//onbeforeunload
}

onchange事件没有正确跟踪

2 个答案: