Wyczyść wszystkie pola formularza po powrocie za pomocą przycisku Wstecz w przeglądarce

Potrzebuję sposobu na wyczyszczenie wszystkich pól w formularzu, gdy użytkownik korzysta z przycisku Wstecz przeglądarki. W tej chwili przeglądarka pamięta wszystkie ostatnie wartości i wyświetla je, kiedy wracasz.

Więcej wyjaśnień na temat tego, dlaczego tego potrzebuję. Mam wyłączone pole wejściowe, którego wartość jest generowana automatycznie przy użyciu algorytmu, aby była unikalna w określonej grupie danych. Po przesłaniu formularza i wprowadzeniu danych do bazy danych użytkownik nie powinien mieć możliwości ponownego użycia tej samej wartości w celu przesłania tego samego formularza. Dlatego w pierwszej kolejności wyłączyłem pole wprowadzania. Ale jeśli użytkownik użyje przycisku wstecz w przeglądarce, przeglądarka zapamięta ostatnią wartość i ta sama wartość zostanie zachowana w polu wejściowym. W związku z tym użytkownik może ponownie przesłać formularz z tą samą wartością.

Nie rozumiem, co dokładnie się dzieje po naciśnięciu przycisku Wstecz w przeglądarce. Wygląda na to, że cała strona jest pobierana z pamięci podręcznej bez kontaktowania się z serwerem, jeśli rozmiar strony mieści się w limicie pamięci podręcznej przeglądarki. Jak mogę się upewnić, że strona jest ładowana z serwera niezależnie od ustawień przeglądarki po naciśnięciu przycisku Wstecz w przeglądarce?

Nowoczesne przeglądarki implementują coś, co nazywa się pamięcią podręczną wsteczną (BFCache). Po naciśnięciu przycisku Wstecz / Dalej rzeczywista strona nie jest ponownie ładowana (a skrypty nigdy nie są ponownie uruchamiane).

Jeśli musisz coś zrobić w przypadku, gdy użytkownik wciska klawisze wstecz / dalej - nasłuchuj BFCache pageshowi pagehidezdarzeń:

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

Zobacz więcej szczegółów na temat implementacji Gecko i WebKit .

Innym sposobem bez JavaScript jest <form autocomplete="off">zapobieganie ponownemu wypełnianiu formularza przez przeglądarkę ostatnimi wartościami.

Zobacz także to pytanie

Testowałem to tylko z pojedynczym znakiem <input type="text"> wewnątrz formularza, ale działa dobrze w obecnych przeglądarkach Chrome i Firefox, niestety nie w IE10.

Natknąłem się na ten post, szukając sposobu na wyczyszczenie całego formularza związanego z BFCache (pamięć podręczna przycisków wstecz / dalej) w Chrome.

Oprócz tego, który Sim dostarczył, mój przypadek użycia wymagał połączenia szczegółów z przyciskiem Wyczyść formularz na przycisku Wstecz? .

Odkryłem, że najlepszym sposobem na to jest pozwolenie formie zachowywać się zgodnie z oczekiwaniami i wywołanie zdarzenia:

$(window).bind("pageshow", function() {
    var form = $('form'); 
    // let the browser natively reset defaults
    form[0].reset();
});

Jeśli nie obsługujesz inputzdarzeń w celu wygenerowania obiektu w języku JavaScript lub czegoś innego, to koniec. Jeśli jednak słuchasz wydarzeń, to przynajmniej w Chrome musisz sam wywołać changewydarzenie (lub dowolne zdarzenie, które chcesz obsłużyć, w tym niestandardowe):

form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change');

To musi być dodana poreset zrobić dobrego.

Jeśli potrzebujesz kompatybilności ze starszymi przeglądarkami, opcja "pokazu stron" może nie działać. Poniższy kod zadziałał dla mnie.

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

To właśnie zadziałało dla mnie.

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

Początkowo miałem to w $(document).readysekcji mojego jquery, która również działała. Słyszałem jednak, że nie wszystkie przeglądarki uruchamiają się $(document).readypo naciśnięciu przycisku Wstecz, więc go wyjąłem. Nie znam zalet i wad tego podejścia, ale testowałem na wielu przeglądarkach i na wielu urządzeniach i nie znaleziono żadnych problemów z tym rozwiązaniem.

Poniższe linki mogą ci pomóc ...

Przycisk Wstecz w przeglądarce przywraca puste pola , Wyczyść formularz na przycisku Wstecz?

Mam nadzieję, że to pomoże ... Powodzenia