Изменение значения в input: захват старого и нового в JS

Быстрый ответ

Если вам необходимо мгновенное решение, запоминайте значение поля при его фокусировании с использованием события onfocus. При изменении поля, используйте событие onchange, чтобы выяснить новое значение. Вот пример кода:

<input type="text" onfocus="this.previousValue = this.value" onchange="console.log('Прежнее значение:', this.previousValue, 'Текущее значение:', this.value);">

В данном коде событие onfocus сохраняет состоящее в данный момент значение поля в аргумент previousValue при каждом его фокусировании. Когда же происходит изменение, событие onchange срабатывает, и мы можем обратиться к старым и новым значениям.

Подробное разъяснение

Давайте подробнее взглянем на процесс добычи предыдущих и текущих значений текстовых полей:

Сохранение предыдущих значений, используя пользовательские свойства и обработчики событий

Применение расширяемых свойств HTML позволяет нам хранить информацию, принадлежащую элементу:

<input type="text" onfocus="this.setAttribute('oldValue', this.value);" onchange="handleChange(this);">

function handleChange(element) {
  let oldValue = element.getAttribute('oldValue'); // извлекаем старое значение
  let newValue = element.value; // текущее значение
  console.log('Прежнее значение:', oldValue, 'Текущее значение:', newValue);
}

Подробнее об этом расскажет наш спикер на видео

Применение атрибутов данных HTML5 для мониторинга значений

Атрибуты данных HTML5 применяются для эффективного сохранения данных:

let inputElements = document.querySelectorAll('input[type=text]');

inputElements.forEach(input => {
  input.onfocus = function() {
    this.dataset.previousValue = this.value; // сохранили прежнее значение
  };
  input.onchange = function() {
    alert('Прежнее значение: ' + this.dataset.previousValue + ', Текущее значение: ' + this.value); // выводим оба значения
  };
});

Контроль над текстовыми полями через объект JavaScript

Управление большим количеством полей ввода становится проще с использованием объекта JavaScript:

let valueTracker = {}; // хранитель значений

function initializeTracker(elementId) {
  let inputElement = document.getElementById(elementId);
  inputElement.onfocus = function() {
    valueTracker[this.id] = { old: this.value }; // запомнили прежнее значение
  };
  inputElement.onchange = function() {
    valueTracker[this.id].new = this.value; // запомнили новое значение
    alert('Прежнее значение: ' + valueTracker[this.id].old + ', Текущее значение: ' + this.value);
  };
}

Возврат начального значения с помощью свойства defaultValue

Если вам нужно значение поля ввода по умолчанию, используйте свойство defaultValue:

let inputElement = document.getElementById('myInput');
console.log('Исходное значение:', inputElement.defaultValue); // возвращаемся к исходному значению

Визуализация

Представьте текстовое поле как хранитель памяти:

Перед изменением: [🔒🧠]   // Исходное значение запечатлено в «сейфе памяти».
После изменения: [🔓✍️]    // "Сейф" открыт и изменения внесены.

Получаем старое значение как разблокируемый сейф памяти:

🔐🔑 (Открываем «сейф» для встречи с предыдущим содержимым.)

• Событие onchange() фиксирует текущее состояние,
• В то время как хранитель памяти даст нам представление о прошлом.

let oldValue;
inputElement.onfocus = function() { oldValue = this.value; }; // 🔒🧠 Значение убережено в "сейфе памяти"
inputElement.onchange = function() { alert('Прежнее значение: ' + oldValue + ', Текущее значение: ' + this.value); }; // 🔓✍️ "Сейф" открыт

С помощью события onchange, предыдущие и текущие значения всегда находятся под вашим контролем.

Сложные сценарии работы

В реальности, когда вы работаете с формами, состоящими из многих полей ввода, динамическими элементами или асинхронными операциями, ситуация может быть не такой простой, как кажется. Используйте вышеописанные методы для надежного мониторинга изменений.

Особые условия и обстоятельства

Обращайте внимание на особые случаи, такие как поля ввода, которые добавляются в DOM динамически. Принимайте во внимание отличия в поддержке различных браузеров и проверяйте совместимость вашего JavaScript-кода.

Советы опытного профессионала по оптимизации работы

Для улучшения производительности и оптимизации использования памяти рекомендуется делегирование событий на родительский элемент. Это позволяет вам координировать события focus и change всех полей ввода, задействуя только один обработчик событий:

let formElement = document.querySelector('form');
formElement.addEventListener('focus', event => {
  if (event.target.tagName === 'INPUT') {
    event.target.dataset.previousValue = event.target.value; // Сохраняем прежнее значение
  }
}, true); // Перехватываем событие focus

formElement.addEventListener('change', event => {
  if (event.target.tagName === 'INPUT') {
    alert('Прежнее значение: ' + event.target.dataset.previousValue + ', Текущее значение: ' + event.target.value); // Получаем оба значения при изменении
  }
});

Применяя этот метод, вы наверняка сможете мониторить изменения с высокой точностью.

Полезные материалы

1. HTMLElement: событие change – Веб API | MDN — Всё, что может понадобиться вам о событии change.
2. Событие onchange — Здесь вы найдете информацию о применении onchange вместе с элементами DOM.
3. Свойство value текстовых элементов ввода HTML DOM — Инструкция по использованию свойства value.
4. Элемент: событие input – Веб API | MDN — Информация о событии input, которое можно использовать в комбинации с change.
5. События – change — Обзор поддержки и особенностей событий change и oninput в различных браузерах.