Очистка полей формы при использовании кнопки назад в браузере
Быстрый ответ
Если вы перешли обратно на страницу с формой с помощью кнопки "назад" в браузере и данные в полях остались прежними, то возможно решить эту проблему. Просто добавьте в ваш HTML следующий код, который использует событие load
в JavaScript и объект performance.navigation
. От пользователя не требуется никаких дополнительных действий.
window.addEventListener('load', () => {
if (performance.navigation.type === 2) {
document.querySelector('form').reset();
}
});
Этот скрипт автоматически очистит поля вашей формы.
Управление автозаполнением браузера и навигацией по страницам
Отключение функции автозаполнения
Браузеры часто сохраняют информацию, введённую в формы, и автоматически заполняют поля при повторной загрузке страницы. Чтобы предотвратить такое поведение, используйте атрибут <form autocomplete="off">
. При этом браузер "игнорирует" данные формы.
Использование события "pageshow"
Браузеры кэшируют страницы для ускорения работы и при возврате обычно показывают кэшированную версию страницы, обходя перезагрузку. В этих случаях на помощь приходит событие 'pageshow'.
window.addEventListener('pageshow', (event) => {
if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
document.querySelector('form').reset();
}
});
Независимо от того, перезагружается страница или загружается из кэша, этот код очистит поля формы.
Очистка заблокированных полей ввода
Если в вашей форме есть заблокированные поля с автоматически сгенерированными данными, которые не следует повторно отправлять:
Array.from(document.querySelectorAll('form input[disabled]')).forEach(input => input.value = '');
Этот код очистит заблокированные поля, оставив их пустыми.
Принудительная перезагрузка со стороны сервера
Чтобы страница каждый раз загружалась с сервера, используйте window.performance.navigation.type
. Это поможет избежать проблем с повторной отправкой формы.
Визуализация
Представим поля формы как элементы жилища:
Когда вы покидаете дом (🏡), ваш надежный робот-уборщик (🤖) поддерживает порядок, и вы возвращаетесь к чистому состоянию (к пустым полям формы).
Кнопка "назад" в браузере – это ваш робот-уборщик, а поля формы – это ваш дом.
🌐 Кнопка "Назад" = 🤖 Робот-уборщик
📝 Поля формы = 🏡 Дом
Задача: чтобы наш заботливый робот-уборщик всегда поддерживал порядок в доме, когда мы уходим и возвращаемся.
При нажатии на "Назад":
🏡 (До) [🛋️🛏️🪑]
🤖 → 🌐
🏡 (После) [ ]
Управление кросс-браузерной совместимостью и пользовательскими событиями
Обработка пользовательских событий
Если поля формы связаны с событиями, которые должны происходить при их изменении:
$('form').trigger('reset').find(':input').trigger('change');
Это обновит форму, вызывая события изменений.
Тестирование в разных браузерах
Как разный вкус пиццы, так и браузеры работают по-разному. Не забывайте тестировать код в Chrome, Firefox и Safari, чтобы проверить его поведение.
Ограничения при навигации
Как и в любой игре, не существует одного универсального решения. Разные браузеры, разные правила. Это напоминает игру в бинго с индивидуальными картами.
Постоянный мониторинг
Также как пользователи ноутбуков не устают скроллить, так и разработчики не должны уставать тестировать. Внедряйте, проверяйте, тестируйте и снова начинайте сначала.
Полезные материалы
Ниже представлен список ресурсов, которые помогут вам "настроить" вашу форму для правильного сброса.
- HTML Standard – Описание автозаполнения форм
- MDN – Атрибут 'autocomplete'
- Сброс многоэтапной формы с использованием jQuery – Stack Overflow
- MDN – Событие Window: beforeunload
- MDN – Свойство Window: history
- Паттерн Post/Redirect/Get – Wikipedia
- Пример использования шаблона Post-Redirect-Get в PHP – Stack Overflow