Очистите все поля в форме, вернувшись с помощью кнопки возврата в браузере

Мне нужен способ очистить все поля в форме, когда пользователь использует кнопку возврата в браузере. Прямо сейчас браузер запоминает все последние значения и отображает их, когда вы возвращаетесь.

Дополнительные пояснения о том, зачем мне это нужно. У меня отключенное поле ввода, значение которого автоматически создается с использованием алгоритма, который делает его уникальным в определенной группе данных. После того, как я отправил форму и данные были введены в базу данных, пользователь не сможет снова использовать то же значение для отправки той же формы. Поэтому я в первую очередь отключил поле ввода. Но если пользователь использует кнопку браузера «Назад», браузер запоминает последнее значение, и то же значение сохраняется в поле ввода. Следовательно, пользователь может снова отправить форму с тем же значением.

Я не понимаю, что именно происходит, когда вы нажимаете кнопку возврата в браузере. Похоже, что вся страница извлекается из кеша без обращения к серверу, если размер страницы находится в пределах лимита кеша браузера. Как мне убедиться, что страница загружается с сервера независимо от настроек браузера, когда вы нажимаете кнопку браузера назад?

Современные браузеры реализуют то, что известно как обратный кэш (BFCache). Когда вы нажимаете кнопку «Назад / Вперед», фактическая страница не перезагружается (и сценарии никогда не запускаются повторно).

Если вам нужно что-то сделать в случае нажатия пользователем клавиш назад / вперед - слушайте BFCache pageshowи pagehideсобытия:

window.addEventListener("pageshow", () => {
  // update hidden input field
});

См. Дополнительные сведения о реализациях Gecko и WebKit .

Другой способ без JavaScript - <form autocomplete="off">запретить браузеру повторно заполнять форму последними значениями.

См. Также этот вопрос

Проверено это только с одним <input type="text"> внутри формы, но отлично работает в текущих Chrome и Firefox, к сожалению, не в IE10.

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

Ссылки ниже могут вам помочь ..

Кнопка браузера назад восстанавливает пустые поля , очистить форму на кнопку Назад?

Надеюсь, это поможет ... Удачи