Question

我有一个文本框，可以跟踪旧数据并在keyup事件上用新数据进行验证。但这对单个字段效果很好。

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            alert('Content has been changed');
        }
    });
});
<input type="text" id="myContent" class="field1">

如果有多个具有相同类的字段，那么我们如何跟踪旧数据并用新数据进行验证？

Answer 1

有很多方法，但是下面是保留data属性中原始值并将其与在keyup事件中输入的值进行比较的一种方法。

请参见下面的代码

$(function(){
  //store original value in data attribute
  $('input.field1').each(function(){
     $(this).data('original', $(this).val());
  });
  
  //set keyup event handler
  $('input.field1').on('keyup', function(){
     var changedValue = $(this).val();
     if(changedValue != $(this).data('original')) {
       console.log('Value changed');
     } else {
       console.log('Value same');
     }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="myContent1" class="field1" value="value1"><br>
<input type="text" id="myContent2" class="field1" value="value1"><br>
<input type="text" id="myContent3" class="field1" value="value1"><br>
<input type="text" id="myContent4" class="field1" value="value1"><br>

Answer 2

这里类似于第一个答案，但是当用户将注意力集中在输入上时会保存原始值。还有一个working fiddle。

$('.field1').on('focus', function() {
  $(this).data('value', $(this).val());
}).on('keyup', function() {
  if ($(this).data('value') != $(this).val()) {
    console.log('Content has changed');
  }
});

使用jquery检查文本框值是否更改的更好方法

2 个答案: