Очистка полей формы при использовании кнопки назад в браузере

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

Если вы перешли обратно на страницу с формой с помощью кнопки "назад" в браузере и данные в полях остались прежними, то возможно решить эту проблему. Просто добавьте в ваш 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, чтобы проверить его поведение.

Ограничения при навигации

Как и в любой игре, не существует одного универсального решения. Разные браузеры, разные правила. Это напоминает игру в бинго с индивидуальными картами.

Постоянный мониторинг

Также как пользователи ноутбуков не устают скроллить, так и разработчики не должны уставать тестировать. Внедряйте, проверяйте, тестируйте и снова начинайте сначала.

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

Ниже представлен список ресурсов, которые помогут вам "настроить" вашу форму для правильного сброса.

1. HTML Standard – Описание автозаполнения форм
2. MDN – Атрибут 'autocomplete'
3. Сброс многоэтапной формы с использованием jQuery – Stack Overflow
4. MDN – Событие Window: beforeunload
5. MDN – Свойство Window: history
6. Паттерн Post/Redirect/Get – Wikipedia
7. Пример использования шаблона Post-Redirect-Get в PHP – Stack Overflow