输入 jQuery 在 onchange 之前获取旧值，在 onchange 之后获取值

小开

最佳答案

最简单的方法是在元素获得焦点时使用 data()保存原始值。下面是一个非常基本的例子:

JSFiddle: < a href = “ http://JSFiddle.net/TrueBlueAussie/e4ovx435/”rel = “ norefrer”> http://JSFiddle.net/trueblueaussie/e4ovx435/

$('input').on('focusin', function(){
console.log("Saving value " + $(this).val());
$(this).data('val', $(this).val());
});


$('input').on('change', function(){
var prev = $(this).data('val');
var current = $(this).val();
console.log("Prev value " + prev);
console.log("New value " + current);
});

更好地使用委托事件处理程序

注意: 当可以有多个匹配元素时，使用委托的事件处理程序通常更有效。这样只添加一个处理程序(更小的开销和更快的初始化) ，任何速度差异 在活动时间是可以忽略不计的。

下面是使用连接到 document的委托事件的相同示例:

$(document).on('focusin', 'input', function(){
console.log("Saving value " + $(this).val());
$(this).data('val', $(this).val());
}).on('change','input', function(){
var prev = $(this).data('val');
var current = $(this).val();
console.log("Prev value " + prev);
console.log("New value " + current);
});

JsFiddle: < a href = “ http://JsFiddle.net/TrueBlueAussie/e4ovx435/65/”rel = “ noReferrer”> http://JsFiddle.net/trueblueaussie/e4ovx435/65/

委托事件的工作方式是监听祖先元素(本例中为 document *)上的事件(focusin、 change等) ，然后应用 jQuery 过滤器(input) 只有泡沫链中的元素，然后应用函数 只有那些导致事件的匹配元素。

* 注意: 一个通用规则，使用 document作为默认的委托事件，而不是 body。body有一个与样式有关的错误，可能导致它不会得到冒泡的鼠标事件。此外，document始终存在，因此您可以将其附加到 DOM 就绪处理程序:)之外

小开

当然，您需要手动存储旧的价值，这取决于您感兴趣的时刻(在集中注意力之前，从上次更改)。可以从 defaultValue 属性获取初始值:

function onChange() {
var oldValue = this.defaultValue;
var newValue = this.value;
}

聚焦之前的值可以采取，如《消失的编码》的答案所示。但是你必须记住，价值不需要专注就可以改变。

小开

我的解决办法就在这里

function getVal() {
var $numInput =  $('input');
var $inputArr = [];
for(let i=0; i < $numInput.length ; i++ )
$inputArr[$numInput[i].name] = $numInput[i].value;
return $inputArr;
}
var $inNum =  getVal();
$('input').on('change', function() {
// inNum is last Val
$inNum =  getVal();
// in here we update value of input
let $val = this.value;
});

小开

在创建文本框时，只需将初始值放入 data 属性中，例如

超文本标示语言

<input id="my-textbox" type="text" data-initial-value="6" value="6" />

JQuery

$("#my-textbox").change(function () {
var oldValue = $(this).attr("data-initial-value");
var newValue = $(this).val();
});

小开

我找到了一个即使使用“ Select2”插件也能工作的解决方案:

function functionName() {
$('html').on('change', 'select.some-class', function() {
var newValue = $(this).val();
var oldValue = $(this).attr('data-val');
if ( $.isNumeric(oldValue) ) { // or another condition
// do something
}
$(this).attr('data-val', newValue);
});
$('select.some-class').trigger('change');
}

小开

我今天发现了这个问题，但我不知道为什么这个问题变得如此复杂，而不是像这样简单地实现它:

var input = $('#target');
var inputVal = input.val();
input.on('change', function() {
console.log('Current Value: ', $(this).val());
console.log('Old Value: ', inputVal);
inputVal = $(this).val();
});

如果你想要针对多个输入，那么使用每个函数:

$('input').each(function() {
var inputVal = $(this).val();
$(this).on('change', function() {
console.log('Current Value: ',$(this).val());
console.log('Old Value: ', inputVal);
inputVal = $(this).val();
});

小开

经过修正的解决方案适用于某些情况，但不是理想的解决方案。Bhojendra Rauniyar 提供的解决方案只在某些情况下有效。Var inputVal 将始终保持不变，因此多次更改输入将中断函数。

当使用聚焦时，这个函数也可能中断，因为在 html 数字输入时，使用了上下旋转器。这就是为什么 J.T. 泰勒有最好的解决方案。通过添加 data 属性，您可以避免这些问题:

<input id="my-textbox" type="text" data-initial-value="6" value="6" />

小开

如果您只需要一个当前值，而上面的选项不起作用，您可以这样使用它。

$('#input').on('change', () => {
const current = document.getElementById('input').value;
}

小开

我的业务目标是从以前的输入中删除类，并将其添加到新的输入中。
在这种情况下，有一个简单的解决方案: 在添加之前从所有输入中删除类

<div>
<input type="radio" checked><b class="darkred">Value1</b>
<input type="radio"><b>Value2</b>
<input type="radio"><b>Value3</b>
</div>

还有

$('input[type="radio"]').on('change', function () {
var current = $(this);
current.closest('div').find('input').each(function () {
(this).next().removeClass('darkred')
});
current.next().addClass('darkred');
});

http://jsfiddle.net/gkislin13/tybp8skL

小开

如果您正在寻找 select droplist，并且 jquery 代码希望这样:

var preValue ="";
//get value when click select list
$("#selectList").click(
function(){
preValue =$("#selectList").val();
}
);


$("#selectList").change(
function(){
var curentValue = $("#selectList").val();
var preValue = preValue;
console.log("current:"+curentValue );
console.log("old:"+preValue );
}
);