Question

我正在处理一项功能，在该功能中，如果用户决定离开页面，则需要通知用户表单中有未保存的更改。

我差不多完成但是这个问题很小 -

我在输入更改事件上设置了一个布尔GIF。

dirty事件会检测到任何类型的更改，因为它不会跟踪更改。例如，如果输入字段的原始值.change()已修改为hello并返回bye，则仍会设置hello布尔值。

有什么方法可以用初始值备份表单，然后在每次更改事件时将其与自身进行比较？

Answer 1

您需要一种方法将表单数据序列化为JSON对象，然后您可以通过迭代属性或比较JSON.stringify值来比较JSON对象。

为了做到这一点，我稍微修改了从here客观化表单数据的方法。

＆＃13;

var form = document.getElementById("myForm");
var originalFormData = objectifyForm(form);
var originalFormDataString = JSON.stringify(originalFormData);

setInterval(function() {
  var formData = objectifyForm(form);
  var formDataString = JSON.stringify(formData);
  console.log("Form is dirty: " + (formDataString != originalFormDataString));
},1000);

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['id']] = formArray[i]['value'];
  }
  return returnArray;
}

＆＃13;

<form id="myForm">

  <input id="myInput" value="test" type="text" />
</form>

＆＃13;

Answer 2

你可以这样做。请记住，此解决方案只是一个示例。你有多个输入元素，而不是使用数组/对象来保存defaultValue。

 var defaultValue = document.getElementById("myText").defaultValue;//Get the default value

 var handleChange = function (){
    let value =  document.getElementById("myText").value;//get the current value
    if(defaultValue===value){
       console.log("dirty false")
    }else {
       console.log("Dirty True")
    }
 
 }

<input type="text" id="myText" value="abc" onkeyup="handleChange()">

Answer 3

我认为你可以创建一个javascript为空的initial_values = {}对象。使用key：value对形式的默认值初始化它。如果设置了脏布尔值，则可以在以后比较它。

jQuery检测输入变化

3 个答案: