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

Question

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

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

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

Answer 1

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

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

псевдо JQuery например:

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

См более подробную информацию для Gecko и WebKit реализаций.

Answer 2

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

Browser back button restores empty fields, Clear Form on Back Button?

Надеется, что это помогает ... Успехам

Answer 3

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

В дополнение к тому, что поставил Сим, мой прецедент требовал, чтобы детали необходимо было комбинировать с 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 ничего хорошего.

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

Смотрите также this question

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