У меня есть input text в jQuery, я хочу знать, возможно ли получить значение этого input text (type=number и type=text) до того, onchange произойдет onchange, а также получить значение того же входного текста ввода после того, как произойдет обмен, Это использует jQuery.
Что я пробовал:
Я попытался сохранить значение в переменной, затем вызвать это значение внутри onchange, но я получаю пустое значение.
Самый простой способ - сохранить исходное значение с помощью 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:)
Определенно вам нужно будет хранить старое значение вручную, в зависимости от того, в какой момент вы заинтересованы (до фокусировки, от последнего изменения). Начальное значение можно взять из свойства defaultValue:
function onChange() {
var oldValue = this.defaultValue;
var newValue = this.value;
}
Значение перед фокусировкой может быть принято, как показано в ответе Gone Coding. Но вы должны иметь в виду, что значение можно изменить без фокусировки.
мое решение здесь
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;
});
Просто поместите начальное значение в атрибут данных при создании текстового поля, например,
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();
});