Изменение значения в 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); // Получаем оба значения при изменении
}
});
Применяя этот метод, вы наверняка сможете мониторить изменения с высокой точностью.
Полезные материалы
- HTMLElement: событие change – Веб API | MDN — Всё, что может понадобиться вам о событии
change
. - Событие onchange — Здесь вы найдете информацию о применении
onchange
вместе с элементами DOM. - Свойство value текстовых элементов ввода HTML DOM — Инструкция по использованию свойства
value
. - Элемент: событие input – Веб API | MDN — Информация о событии
input
, которое можно использовать в комбинации сchange
. - События – change — Обзор поддержки и особенностей событий
change
иoninput
в различных браузерах.