使用jQuery检测表单中的数据更改

Question

我正在使用带有母版页的ASP.NET 2.0,我想知道是否有人知道某种方法来检测特定区域内的字段<div>或fieldset已被更改(例如,标记为' IsDirty')？

Answer 1

您可以为所有输入绑定Change事件,并将变量标记为true.像这样.

var somethingChanged = false;
$(document).ready(function() { 
   $('input').change(function() { 
        somethingChanged = true; 
   }); 
});

但是,请记住,如果用户更改了某些内容,然后更改回原始值,则仍会将其标记为已更改.

更新:对于特定的div或fieldset.只需使用给定fieldset或div的id.例:

var somethingChanged = false;
$(document).ready(function() { 
   $('#myDiv input').change(function() { 
        somethingChanged = true; 
   }); 
});

Answer 2

快速(但非常脏)的解决方案

这是快,但它不会照顾ctrl+z或者cmd+z,它会给你按下时,假阳性shift,ctrl或tab关键:

$('#my-form').on('change keyup paste', ':input', function(e) {
    // The form has been changed. Your code here.
});

用这个小提琴测试它.

快速(不太脏)的解决方案

这将防止误报shift,ctrl还是tab关键,但它不会处理ctrl+z或cmd+z:

$('#my-form').on('change keyup paste', ':input', function(e) {

  var keycode = e.which;

  if (e.type === 'paste' || e.type === 'change' || (
      (keycode === 46 || keycode === 8) || // delete & backspace
      (keycode > 47 && keycode < 58) || // number keys
      keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
      (keycode > 64 && keycode < 91) || // letter keys
      (keycode > 95 && keycode < 112) || // numpad keys
      (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
      (keycode > 218 && keycode < 223))) { // [\]' (in order))

    // The form has been changed. Your code here.

  }

});

用这个小提琴测试它.

完整(不太快)的解决方案

如果要处理所有情况,您应该使用:

// init the form when the document is ready or when the form is populated after an ajax call
$(document).ready(function() {
  $('#my-form').find(':input').each(function(index, value) {
    $(this).data('val', $(this).val());
  });
})

$('#my-form').on('change paste', ':input', function(e) {
  $(this).data('val', $(this).val());
  // The form has been changed. Your code here.
});

$('#my-form').on('keyup', ':input', function(e) {
  if ($(this).val() != $(this).data('val')) {
    $(this).data('val', $(this).val());
    // The form has been changed. Your code here. 
  }
});

用这个小提琴测试它.

Answer 3

一个简单而优雅的解决方案(它可以实时检测表单元素的变化):

var formChanged = false;

$('#my-div form').on('keyup change paste', 'input, select, textarea', function(){
    formChanged = true;
});

Answer 4

对于表单，您可以序列化加载的内容，然后在以后比较序列化，例如：

$(function(){
    var initdata=$('form').serialize();
    $('form').submit(function(e){
        e.preventDefault();
        var nowdata=$('form').serialize();
        if(initdata==nowdata) console.log('nothing changed'); else console.log('something changed');
        // save
        initdata=nowdata;
        $.post('settings.php',nowdata).done(function(){
            console.log('saved');
        });
    });
});

Answer 5

只是为了澄清,因为问题是"在某个字段集/ div内":

var somethingChanged = false;
$(document).ready(function() { 
   $('fieldset > input').change(function() { 
        somethingChanged = true; 
   }); 
});

要么

var somethingChanged = false;
$(document).ready(function() { 
   $('div > input').change(function() { 
        somethingChanged = true; 
   }); 
});