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

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

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

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

Ответы

Ответ 1

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

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

Пример псевдо-jQuery:

$(window).bind("pageshow", function() {
  // update hidden input field
});

Подробнее о Gecko и WebKit реализации.

Ответ 2

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

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

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

Ответ 3

Я столкнулся с этим сообщением при поиске способа очистить всю форму, связанную с BFCache (кешем обратной/прямой кнопки) в Chrome.

В дополнение к тому, что предоставил Sim, мой случай использования требовал, чтобы детали, которые нужно было объединить с Очистить форму на кнопке Назад?.

Я обнаружил, что лучший способ сделать это - позволить форме вести себя так, как она ожидает, и инициировать событие:

$(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 для любой пользы.

Ответ 4

Если вам нужна совместимость со старыми браузерами, а также ", то страница" может не работать. Следующий код работал у меня.

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

Ответ 6

Это то, что сработало для меня.

<script>
$(window).bind("pageshow", function() {
    $("#id").val('');
    $("#another_id").val('');
});
</script>

Я изначально имел это в разделе $(document).ready моего jquery, который также работал. Тем не менее, я слышал, что не все браузеры запускают $(документ). Уже нажав кнопку "Назад", поэтому я ее вынул. Я не знаю плюсов и минусов этого подхода, но я тестировал несколько браузеров на нескольких устройствах, и никаких проблем с этим решением не было найдено.