如何用jQuery获取输入框旧值与新值？现有代码遇问题求助

嘿，我来帮你搞定这个问题！你现在拿不到旧值的核心原因是从来没有给输入框初始化过data-val这个数据属性，所以第一次触发change事件时，$(this).data('val')自然是undefined。下面给你一套完整的解决方案：

核心思路 #

我们需要先在页面加载完成时，把输入框的初始值存入它的data-val属性；之后每次change事件触发时，先取出旧值，再把当前值更新到data-val里，这样就能持续追踪新旧值的变化了。

完整代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> License Key</label>
<input id='licensekey' type='text' class='input'>

<script>
// 页面加载完成后，初始化输入框的旧值
$(document).ready(function() {
  $('#licensekey').data('val', $('#licensekey').val());
});

$(document).on('change', '#licensekey', function () { 
  var prev = $(this).data('val');
  var current = $(this).val(); 
  
  console.log("Prev value " + prev); 
  console.log("New value " + current); 
  
  // 更新data-val为当前值，作为下一次触发事件时的旧值
  $(this).data('val', current);
}); 
</script>

额外优化建议 #

如果你的输入框需要追踪实时输入的变化（比如用户打字时就更新值），可以把change事件换成input事件，这样能覆盖更多场景；另外，你也可以直接在HTML标签里初始化data-val属性，比如<input id='licensekey' type='text' class='input' data-val=''>，再通过JS赋值，效果是一致的。

内容的提问来源于stack exchange，提问作者devs1994