Мне нужен способ очистить все поля в форме, когда пользователь использует кнопку возврата в браузере. Прямо сейчас браузер запоминает все последние значения и отображает их, когда вы возвращаетесь.
Дополнительные пояснения о том, зачем мне это нужно. У меня отключенное поле ввода, значение которого автоматически создается с использованием алгоритма, который делает его уникальным в определенной группе данных. После того, как я отправил форму и данные были введены в базу данных, пользователь не сможет снова использовать то же значение для отправки той же формы. Поэтому я в первую очередь отключил поле ввода. Но если пользователь использует кнопку браузера «Назад», браузер запоминает последнее значение, и то же значение сохраняется в поле ввода. Следовательно, пользователь может снова отправить форму с тем же значением.
Я не понимаю, что именно происходит, когда вы нажимаете кнопку возврата в браузере. Похоже, что вся страница извлекается из кеша без обращения к серверу, если размер страницы находится в пределах лимита кеша браузера. Как мне убедиться, что страница загружается с сервера независимо от настроек браузера, когда вы нажимаете кнопку браузера назад?
Ответы:
Современные браузеры реализуют то, что известно как обратный кэш (BFCache). Когда вы нажимаете кнопку «Назад / Вперед», фактическая страница не перезагружается (и сценарии никогда не запускаются повторно).
Если вам нужно что-то сделать в случае нажатия пользователем клавиш назад / вперед - слушайте BFCache
pageshow
иpagehide
события:window.addEventListener("pageshow", () => { // update hidden input field });
См. Дополнительные сведения о реализациях Gecko и WebKit .
источник
Другой способ без JavaScript -
<form autocomplete="off">
запретить браузеру повторно заполнять форму последними значениями.См. Также этот вопрос
Проверено это только с одним
<input type="text"
> внутри формы, но отлично работает в текущих Chrome и Firefox, к сожалению, не в IE10.источник
<input type="text" autocomplete="off">
Я наткнулся на этот пост, когда искал способ очистить всю форму, связанную с BFCache (кеширование кнопок назад / вперед) в Chrome.
В дополнение к тому, что предоставил Sim, мой вариант использования требовал, чтобы детали были объединены с Clear Form on Back Button? .
Я обнаружил, что лучший способ сделать это - позволить форме вести себя так, как она ожидает, и вызвать событие:
$(window).bind("pageshow", function() { var form = $('form'); // let the browser natively reset defaults form[0].reset(); });
Если вы не обрабатываете
input
события для создания объекта в JavaScript или что-то еще в этом отношении, то все готово. Однако, если вы слушаете события, то, по крайней мере, в Chrome вам нужно инициироватьchange
событие самостоятельно (или любое другое событие, которое вы хотите обработать, в том числе настраиваемое):form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change');
Это должно быть добавлено после
reset
того, как делать какие - либо блага.источник
Если вам нужна совместимость со старыми браузерами, опция "Pageshow" может не работать. Для меня работал следующий код.
$(window).load(function() { $('form').get(0).reset(); //clear form data on page load });
источник
Это то, что у меня сработало.
$(window).bind("pageshow", function() { $("#id").val(''); $("#another_id").val(''); });
Изначально это было в
$(document).ready
разделе моего jquery, который тоже работал. Однако я слышал, что не все браузеры$(document).ready
запускаются при нажатии кнопки «Назад», поэтому я убрал ее. Я не знаю плюсов и минусов этого подхода, но я протестировал его в нескольких браузерах и на нескольких устройствах, и никаких проблем с этим решением обнаружено не было.источник
Ссылки ниже могут вам помочь ..
Кнопка браузера назад восстанавливает пустые поля , очистить форму на кнопку Назад?
Надеюсь, это поможет ... Удачи
источник