Введите jQuery, чтобы получить старое значение перед изменением и получить значение после внесения изменений

У меня есть input text в jQuery, я хочу знать, возможно ли получить значение этого input text (type=number и type=text) до того, onchange произойдет onchange, а также получить значение того же входного текста ввода после того, как произойдет обмен, Это использует jQuery.

Что я пробовал:

Я попытался сохранить значение в переменной, затем вызвать это значение внутри onchange, но я получаю пустое значение.

Ответ 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 (input) только к элементам в цепочка пузырьков, затем применяя функцию только к тем элементам, которые вызвали событие.

* Примечание. Общее правило использует document как значение по умолчанию для делегированных событий, а не body. body имеет ошибку, связанную с стилем, что может привести к тому, что он не получит пузырьковые события мыши. Также document всегда существует, поэтому вы можете подключаться к нему вне готового обработчика DOM:)

Ответ 2

Определенно вам нужно будет хранить старое значение вручную, в зависимости от того, в какой момент вы заинтересованы (до фокусировки, от последнего изменения). Начальное значение можно взять из свойства defaultValue:

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

Значение перед фокусировкой может быть принято, как показано в ответе Gone Coding. Но вы должны иметь в виду, что значение можно изменить без фокусировки.

Ответ 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;      
});

Ответ 4

Просто поместите начальное значение в атрибут данных при создании текстового поля, например,

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