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

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

$(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, чтобы сделать что-то хорошее.

Answer 4

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

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

Answer 5

Вот что у меня сработало.

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

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

Answer 6

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

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

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