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

我在jQuery中有一个

input text

，我想知道是否有可能在

onchange

发生之前获取该

input text

（

type=number

和

type=text

）的值，以及在onchange发生之后获取相同输入文本的值。这是在使用jQuery

我的尝试：

---

我试图保存变量的值，然后在onchange中调用该值，但得到的是一个空值。

最简单的方法是在元素获得焦点时使用

data（）

保存原始值。下面是一个非常基本的例子：

JSFiddle:

更好地使用委托事件处理程序 注意：当可以有多个匹配元素时，使用委托事件处理程序通常更有效。这样，只添加了一个处理程序（开销更小，初始化更快），事件时的任何速度差异都可以忽略不计

下面是使用连接到

文档的委派事件的相同示例：

$(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:

委派事件通过侦听祖先元素（
document
*在本例中）上的事件（
focusin
，
change
等），然后将jQuery筛选器（
input
）仅应用于气泡链中的元素，然后将函数仅应用于导致事件的匹配元素

*注意：一般规则是，使用
文档
作为委派事件的默认值，而不是
正文
body
有一个与样式有关的bug，它可能导致它无法获得冒泡的鼠标事件。另外，
document
始终存在，因此您可以在DOM就绪处理程序之外附加到它：）
您肯定需要手动存储旧值，具体取决于您感兴趣的时刻（聚焦之前，从上次更改开始）。
初始值可以从defaultValue属性中获取：

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

聚焦前的值可以如Gone的答案所示。但你必须记住，价值可以在不聚焦的情况下改变。
我的解决方案就在这里

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;      
});

函数getVal（）{
var$numInput=$（'input'）；
var$inputArr=[]；
for（设i=0；i<$numInput.length；i++）
$inputArr[$numInput[i]。名称]=$numInput[i]。值；
返回$inputArr；
}
var$inNum=getVal（）；
$（'input'）。在（'change'，function（）上{
//inNum是最后的Val
$inNum=getVal（）；
//在这里，我们更新输入值
让$val=this.value；
});

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

HTML

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

---

我找到了一个甚至可以与“Select2”插件配合使用的解决方案：

---

我今天发现了这个问题，但我不确定为什么这会变得如此复杂，而不是简单地像这样实施：

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将始终保持不变，因此多次更改输入将中断函数

使用focus时，该函数也可能会中断，因为▲▼ html数字输入上的（上/下）微调器。这就是为什么J.T.泰勒有最好的解决方案。通过添加数据属性，可以避免以下问题：

---

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

$('#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>

---

jsIDLE:

请显示您尝试的代码。最简单的方法是在元素获得焦点时，使用

data（）

保存原始值。如果他们多次更改值而不更改焦点，会发生什么情况。@bumperbox：如果在输入具有焦点时所做的更改对您很重要，您应该侦听关键更改，而不是焦点/模糊事件hanks，但我建议数据的名称类似于“prev_val”，而不是“val”，以减少混淆。@kristianp:如果您觉得

val

不适合该值，请使用您喜欢的其他名称。我倾向于在它们前面加上插件的首字母以使其唯一。如果val是一个文件呢？我发现我总是得到这个.defaultValue的“未定义”。里程数可能会有所不同。@Brendan:可能你错过了值属性，我也没有定义。如何传递defaultValue？默认值是设置到字段的默认值。不一定是旧值，如果它是由用户更改的，而且“如果没有设置默认值，它可能是未定义的”-最后一条语句没有经过测试，只是猜测而已。默认值不是在jQuery对象上定义的，而是在DOM上定义的。如果您有一个jQuery对象，则可以执行

$jQueryObject[0]。默认值

更多信息：

$('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();
});

$('#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');
});