JS-функция для отслеживания изменений в HTML-форме
Быстрый ответ
Для отслеживания любых изменений в форме применяется метод addEventListener
из JavaScript, настроенный на события input
или change
. Он изменяет статус isModified
:
let isModified = false;
document.querySelectorAll('form input, form select, form textarea').forEach((elem) => {
elem.addEventListener('change', () => isModified = true);
});
// Теперь переменная `isModified` будет свидетельствовать о любой модификации формы.
Этот код применяется ко всем элементам формы и регистрирует любые изменения. Перед отправкой формы значения переменной isModified
следует проверить.
Погружение в детали: подробное обнаружение изменений в форме
Если требуется отследить специфичные изменения, то можно применить следующий метод для детального сравнения:
let originalFormData = new FormData(document.querySelector('form'));
function checkForChanges() {
let currentFormData = new FormData(document.querySelector('form'));
for(let key of originalFormData.keys()) {
if(originalFormData.get(key) !== currentFormData.get(key)){
console.log(`Поле ${key} изменилось. Что-то здесь не так! 😅`);
return true;
}
}
return false;
}
Сохраните исходное состояние формы и сравнивайте его с текущим, что поможет выявить возможные изменения.
Подано сцене: хеширование
Из-за большого числа полей в форме, использование хеш-функций, таких как MD5 или SHA1, облегчает процесс сравнения значений:
function generateHash(formData) {
// Пример с MD5
return CryptoJS.MD5(formData).toString();
}
let form = document.querySelector('form');
let originalHash = generateHash(new FormData(form).toString());
function formHasChanged() {
let currentHash = generateHash(new FormData(form).toString());
return originalHash !== currentHash;
}
Вместо сравнения данных, проверяйте хеши, это быстро выявляет любые изменения.
Визуализация
Визуализация HTML-формы может выглядеть следующим образом:
Первоначальное состояние: [⚪, ⚪, ⚪] # Все поля пустые.
Если студент ответил на несколько вопросов:
Обнаружены изменения:
1-я правка: [🔴, ⚪, ⚪] # Первое поле заполнено.
2-я правка: [🔴, 🟡, ⚪] # Второе поле заполнено.
// и так далее.
Каждый новый ответ указывает на изменение формы:
Детектор изменений: С любым новым вводом возникает предупреждение "Есть изменения! 🚨".
Это напоминает по своей работе скрипт, который постоянно следит за содержимым формы.
Интерактивный, увлекательный UX
Для улучшения качества взаимодействия с пользователем, оставляйте предупреждение о несохранённых изменениях перед закрытием страницы:
window.addEventListener('beforeunload', function (e) {
if (formHasChanged()){
e.preventDefault();
e.returnValue = '';
}
});
Важно не только фиксировать изменения, но и активно реагировать на действия пользователя для повышения удобства использования.
Надежность, доступность и... бессмертие?
Сделаем систему обнаружения изменений универсальной, такой, которая будет работать с различными элементами управления и будет подходить для разнообразных технологий:
Динамичное управление формами
Для форм, которые динамически загружают поля, используйте "наблюдатели за мутациями":
let observer = new MutationObserver(() => {
// При обнаружении изменений в DOM-дереве, наблюдатель переустанавливает обработчики событий
});
observer.observe(document.querySelector('form'), {childList: true, subtree: true});
Распространение изменений
Изменения, которые происходят во вложенных формах, можно отслеживать с помощью механизма всплытия событий:
document.querySelector('form').addEventListener('input', (event) => {
// Форма изменилась!
});
Назначаем один обработчик для формы и контролируем все внутренние изменения.
Интеграция с современными фреймворками
Работа с библиотеками, такими как Formik или React Hook Form, упрощается благодаря их встроенным механизмам для обнаружения изменений. Поищите аналогичные инструменты во Vue, Angular и других средах разработки.
Полезные материалы
- Element: input event – Web APIs | MDN — описание механизма обнаружения пользовательского ввода в формах.
- change event | jQuery API Documentation — применение jQuery для отслеживания изменений.
- Lodash Documentation — сравнение объектов на равенство с помощью Lodash.
- Window: beforeunload event – Web APIs | MDN — информация о предупреждении пользователей перед закрытием вкладки с несохранёнными данными.
- Formik: Build forms in React, without the tears — библиотека для удобной работы с формами в React.