我如何知道表单输入已更改？
我有一个由生成的表单，其中包含大量输入和texareas。
当输入值改变时，我需要知道它并将输入和表单标记为“脏”。 如果用户试图不保存而离开页面，我会要求他或她确认放弃更改。
有关如何做到这一点的任何建议？
html控件包含一个保存原始值的属性。 您可以将此值与当前值进行比较，以查看是否有任何更改。
function getHasChanges() { var hasChanges = false; $(":input:not(:button):not([type=hidden])").each(function () { if ((this.type == "text" || this.type == "textarea" || this.type == "hidden") && this.defaultValue != this.value) { hasChanges = true; return false; } else { if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) { hasChanges = true; return false; } else { if ((this.type == "select-one" || this.type == "select-multiple")) { for (var x = 0; x < this.length; x++) { if (this.options[x].selected != this.options[x].defaultSelected) { hasChanges = true; return false; } } } } } }); return hasChanges; } function acceptChanges() { $(":input:not(:button):not([type=hidden])").each(function () { if (this.type == "text" || this.type == "textarea" || this.type == "hidden") { this.defaultValue = this.value; } if (this.type == "radio" || this.type == "checkbox") { this.defaultChecked = this.checked; } if (this.type == "select-one" || this.type == "select-multiple") { for (var x = 0; x < this.length; x++) { this.options[x].defaultSelected = this.options[x].selected } } }); }
来自jQuery Docs：
//This applies to whole form $('#formID').change(function() { alert('Form changed!'); });
你可以这样做只检查输入并通知用户，如果他们试图退出而不保存更改。
var inputsChanged = false; $('#formID input').change(function() { inputsChanged = true; }); $(window).unload(function() { if (inputsChanged === true) { alert('Would you like to save your edits before exiting?'); } });
jQuery API .change（）
恢复这个老问题，因为我想到了一个更简单/更好的方法。 您可以序列化初始表单数据，存储它，然后稍后再次序列化并检查它是否已更改，而不是监听各种输入上的事件，如下所示：
var originalFormData = $('form#formId').serialize(); function checkFormChanged() { if(originalFormData !== $('form#formId').serialize()) { //it's dirty! } }
这里的另一个优点是，如果用户进行了更改然后将其还原 ，则此检查会将表单报告为干净。
我会用jQuery做到这一点。 它会是这样的（只是草稿，你可能需要添加/更改一些代码）：
$(document).ready(function() { $('#formId:input').each(function(key) { $(this).change(function() { $(this).addClass('dirty'); }); }); });
然后，在POSTing之前，检查是否有脏输入。 您甚至可以使用脏css类添加一些颜色。
编辑：错字固定’已更改’为’更改’
您可以使用jquery插件dirrty来识别脏表单。
https://github.com/rubentd/dirrty
在on（“dirty”）事件中，将一些全局变量设置为true以标识表单已更改。
处理window.onbeforeunload或$(window).unload()事件，并根据该变量值从用户处获得确认。
此插件的优点是，您可以使用’on（“clean”）事件再次将表单更改为原始值