Как запомнить старое значение инпута?

Question

[leni_m]

$('#input').on('input', function(){
    var newVal = $(this).val();
})

А как получить старое значение, которое было вписано до события "input"?

Answer 1

[Дима Паутов]

Ну так сначала сохраните значение поля в переменную.

var oldValue = $('#input').val();

$('#input').on('input', function(){
    var newVal = $(this).val();
})

Comments

[leni_m]

ой а если у меня много инпутов и их может быть разное кол-во?

[Kovalsky]

leni_m, сохраняйте для каждого элемента, хоть в свойство связанного с элементом объекта, хоть в атрибут.

[Дима Паутов]

leni_m,

$('#input')
  .on('focus', function(){

    $(this).data('old-value', $(this).val());

  })
  .on('input', function(){

    var oldVal = $(this).data('old-value');
    var newVal = $(this).val();

  });

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

https://jsfiddle.net/z582q5xs/

[Kovalsky]

Дима Турков, просто интересуюсь - почему вы решили сохранить так - $(this).data('old-value', $(this).val());, а не так - this._old_value = $(this).val();?

[Дима Паутов]

Никита Полевой, this._old_value - это что такое? Я создаю дата атрибут с указанным значением. А что делает ваша конструкция?

[Kovalsky]

Дима Турков, this._old_value - свойство объекта, связанного с текущим инпутом. Можно было его назвать как угодно, хоть "старое значение инпута"

"Я создаю дата атрибут с указанным значением." - не, атрибут не создается, вы создаёте свойство в скрытом объекте который за вас создаёт jQuery, а я создаю свойство прямо в элементе (грубо говоря). Разницы я не вижу никакой, поэтому и спрашиваю.

[Дима Паутов]

Никита Полевой, Никогда в своей жизни не трогал объект со свойствами элемента. Это совершенно без надобности.
Я может чего и не понимаю, но не вижу в этом смысла. Если вам так нравится, пожалуйста, я не против))

[Kovalsky]

Дима Турков, это не в рамках спора, но всё же смысл в логике: вам нужно привязать произвольное значение к элементу, и вы вместо того, чтобы банально сохранять прямо в него, делаете вызов функции из сторонней библиотеки и создаёте отдельные структуры данных для хранения.

"Если вам так нравится, пожалуйста, я не против))" - ну так я же не собираюсь вас убеждать ни в чем; просто поинтересовался почему вы выбрали такой путь, какие вы видите в нём преимущества, может я тоже чего-то не понимаю.

[Дима Паутов]

Никита Полевой, Не, что ты, я не спорю! Уверен есть и другие способы хранения данных у элемента, но я руководствуюсь простым правилом для себя. Для хранения простых данных, привязанных к html элементу, лучше всего их хранить в дата атрибуте. Так проще изменять элементы, сразу видно, какие данные присвоены элементу. Например, мне нужно в шаблоне поместить в эти интупы какую-то инфу, которая потом мне пригодится. Удобней это сделать в дата атрибуте. Сразу видно, какие данные он хранит. Мне чисто визуально удобней так с такими мелкими данными работать. Нежели плодить свойства у элемента.

Многие могу потом перепутать, мол, а херли у этих инпутов есть такие свойства, а у других нет. Какого лешего. Ведь не все разрабы крутые. А так, сразу видно и ясно, кто и что хранит. Это как хранить все переменные в глобальной области. Тут примерно так же. Поэтому свойства элемента никогда не меняю

[Kovalsky]

Дима Турков, понял вас.

ЗЫ: вы же в курсе, что в последних версиях $ data(key, value) пишет не в атрибуты, а в кеш?

[Дима Паутов]

Никита Полевой, честно, нет!

Answer 2

[Вадим Милевский]

Сохранять его до ввода? Например при готовности страницы:

$(document).ready(() => {
let val = $('#input').val();
})

Answer 3

[profesor08]

Вешай событие "focus" и там сохраняй значение инпута в переменную. Далее при вводе что ты там хотел делать.