Javascript jQuery检测输入更改

我正在开发一个功能，用户需要被告知表单中有未保存的更改，以防他们决定离开页面

我差不多做完了，但有个小问题-

我正在输入更改事件上设置布尔

脏

.change（）
事件将检测任何类型的更改，因为它不跟踪更改。例如，如果输入字段具有原始值
hello
，该值被修改为
bye
，并返回到
hello
，它仍将设置
脏
布尔值

是否有任何方法可以使用初始值备份表单，然后在每次更改事件中将其与自身进行比较？
我认为您可以创建一个javascript空的初始值={}对象。以键：值对的形式使用默认值初始化它。如果设置了dirty boolean，则可以稍后使用它进行比较。
您需要一种将表单数据序列化为JSON对象的方法，然后可以通过迭代属性或比较
JSON.stringify
值来比较JSON对象

为了做到这一点，我稍微修改了将表单数据对象化的方法


var form=document.getElementById（“myForm”）；
var originalFormData=目标形式（形式）；
var originalFormDataString=JSON.stringify（originalFormData）；
setInterval（函数（）{
var formData=objectifyForm（表格）；
var formDataString=JSON.stringify（formData）；
log（“表单是脏的：”+（formDataString！=originalFormDataString））；
},1000);
函数objectifyForm（formArray）{//序列化数据函数
var returnArray={}；
对于（变量i=0；i

您可以这样做。请记住，此解决方案只是一个示例。您有多个输入元素，然后使用数组/对象保存默认值


var defaultValue=document.getElementById（“myText”）.defaultValue//获取默认值
var handleChange=函数（）{
让value=document.getElementById（“myText”）.value；//获取当前值
如果（默认值===值）{
console.log（“dirty-false”）
}否则{
console.log（“Dirty-True”）
}
}
我认为您必须存储每个初始输入值，并将其与新更改进行比较，如果不同，则仅将其作为真值。将初始值存储在
本地存储
对象中？将原始值保存在
隐藏字段
中，并在用户尝试导航离开时检查当前值？您可以进行比较使用元素的
defaultValue
属性