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

Question

ユーザーがブラウザの戻るボタンを使用するときに、フォーム内のすべてのフィールドをクリアする方法が必要です。今、ブラウザはすべての最後の値を記憶し、戻ったときにそれらを表示します。私は値自動生成されたデータの特定のグループ内でそれを一意にするためにアルゴリズムを使用している無効な入力フィールドをしました。この を必要とする理由について

より明確化。フォームを送信してデータをデータベースに入力すると、ユーザーは同じフォームを送信するために同じ値を再び使用できません。したがって、私は最初に入力フィールドを無効にしました。しかし、ユーザーがブラウザの戻るボタンを使用すると、ブラウザは最後の値を記憶し、同じ値が入力フィールドに保持されます。したがって、ユーザーは同じ値を持つフォームを再度送信できます。

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

Answer 1

最近のブラウザでは、バックフォワードキャッシュ（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

をChromeのBFCache（バック/フォワードボタンキャッシュ）に関連しています。

Simが提供したことに加えて、私の使用例では、詳細をClear Form on Back Button?と組み合わせる必要がありました。

私はこれを行うための最善の方法は、フォームは、それが期待通りに動作し、イベントをトリガすることが可能であることが判明：

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

あなたがオブジェクトを生成するためにinputイベントを処理していない場合JavaScript、または何か他のことがあれば、あなたは完了です。あなたがイベントを聴いている場合は、その後、Chromeで、少なくともあなたは自分（どんなイベントかは、カスタム1を含め、取り扱いに注意）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> 

これは当初私のjqueryの$（document）.readyセクションにもありましたが、これも機能しました。しかし、私は、すべてのブラウザーが$（document）.readyを打つのに戻るのではないことを聞いたので、取り出しました。私はこのアプローチの長所と短所を知りませんが、複数のデバイス上の複数のブラウザでテストしましたが、この解決策の問題は見つかりませんでした。

Answer 5

古いブラウザと互換性が必要な場合"pageshow"オプションが機能しない可能性があります。次のコードは私のために働いた。

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

Answer 6

JavaScriptをせずに別の方法は、最後の値を使用して、フォームを再充填からブラウザを防ぐために<form autocomplete="off">を使用することです。

は、フォーム内>のみの単一<input type="text"でこれをテストしてもthis question

参照してくださいが、残念ながらないIE10では、現在のChromeとFirefoxで正常に動作します。