Question

我在jquery中有一个input text我想知道是否有可能在{{1}之前获得input text（type=number和type=text）的值发生并在onchange发生后获取相同输入输入文本的值。这是使用jquery。

我尝试了什么：

我尝试在变量上保存值，然后在onchange中调用该值，但我得到空白值

Answer 1

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

JSFiddle： 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： http://jsfiddle.net/TrueBlueAussie/e4ovx435/65/

委派事件通过在祖先元素（本例中为focusin *）上侦听事件（change，document等）来工作，然后应用jQuery过滤器（{{1 }}）仅限于泡泡链中的元素，然后将函数仅应用于导致事件的匹配元素。

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

Answer 2

当然，您需要手动存储旧值，具体取决于您感兴趣的时刻（在关注之前，从上次更改开始）。初始值可以从defaultValue属性中获取：

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

聚焦前的值可以按照Gone Coding的答案所示。但你必须记住，价值可以在没有聚焦的情况下改变。

Answer 3

我的解决方案在这里

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

Answer 4

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

HTML

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

Answer 5

我找到了甚至可以与“ 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');
}

Answer 6

我今天发现了这个问题，但是我不确定为什么为什么这么复杂而不是像下面这样简单地实现它：

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

Answer 7

推荐的解决方案在某些情况下有效，但不是理想的解决方案。 Bhojendra Rauniyar提供的解决方案仅在某些情况下有效。 var inputVal将始终保持不变，因此多次更改输入将破坏该功能。

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

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

Answer 8

如果您只需要一个当前值而上述选项不起作用，则可以这种方式使用它。

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

Answer 9

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

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

JsFiddle：http://jsfiddle.net/gkislin13/tybp8skL

输入jquery在onchange之前获取旧值并在更改后获取值

9 个答案:

最好使用委托事件处理程序