ブラウザの戻るボタンで戻ると、フォームのすべてのフィールドをクリアします

ユーザーがブラウザの戻るボタンを使用したときに、フォーム内のすべてのフィールドをクリアする方法が必要です。現在、ブラウザは最後の値をすべて記憶しており、戻ったときにそれらを表示します。

これが必要な理由をさらに明確にするために 、特定のデータグループ内で一意にするためのアルゴリズムを使用して値が自動生成される無効な入力フィールドがあります。フォームを送信してデータをデータベースに入力すると、ユーザーは同じ値を再度使用して同じフォームを送信できなくなります。したがって、最初に入力フィールドを無効にしました。ただし、ユーザーがブラウザの[戻る]ボタンを使用すると、ブラウザは最後の値を記憶し、同じ値が入力フィールドに保持されます。したがって、ユーザーは同じ値でフォームを再度送信できます。

私が理解していないのは、ブラウザの戻るボタンを押したときに正確に何が起こるかです。ページサイズがブラウザのキャッシュ制限内にある場合、サーバーに接続せずにページ全体がキャッシュから取得されるようです。ブラウザの戻るボタンを押したときに、ブラウザの設定に関係なく、ページがサーバーから読み込まれるようにするにはどうすればよいですか？

最新のブラウザは、バックフォワードキャッシュ（BFCache）と呼ばれるものを実装しています。戻る/進むボタンを押すと、実際のページは再読み込みされません（スクリプトは再実行されません）。

ユーザーが戻る/進むキーを押した場合に何かをする必要がある場合は、BFCachepageshowとpagehideイベントをリッスンします。

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

GeckoとWebKitの実装の詳細を参照してください。

JavaScriptを使用<form autocomplete="off">しない別の方法は、ブラウザーがフォームに最後の値を再入力しないようにすることです。

この質問も参照してください

<input type="text"フォーム内の単一の>でのみこれをテストしましたが、現在のChromeとFirefoxでは正常に動作しますが、残念ながらIE10では動作しません。

ChromeでBFCache（戻る/進むボタンのキャッシュ）に関連するフォーム全体をクリアする方法を探しているときに、この投稿に出くわしました。

Simが提供したものに加えて、私のユースケースでは、詳細を[戻る]ボタンの[フォームをクリア]と組み合わせる必要がありましたか？。

これを行う最良の方法は、フォームが期待どおりに動作できるようにし、イベントをトリガーすることです。

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

inputJavaScriptでオブジェクトを生成するためのイベント、またはその他のことを処理していない場合は、これで完了です。ただし、イベントをリッスンしている場合は、少なくとも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戻るボタンを押すとすべてのブラウザが起動するとは限らないと聞いたので取り出しました。このアプローチの長所と短所はわかりませんが、複数のブラウザーと複数のデバイスでテストしましたが、このソリューションに問題は見つかりませんでした。

以下のリンクが役立つかもしれません。

ブラウザの戻るボタンは空のフィールドを復元します、 戻るボタンのフォームをクリアしますか？

これがお役に立てば幸いです...幸運を祈ります