[Web]戻るボタンでフォームが残っているのが困る場合の対処

超まとめ

バックボタンで戻ったときにフォームの状態を忘れていて欲しい場合は、onpageshowイベントでreset()するといい感じ。

説明

ChromeやFirefoxでフォーム入力してSubmitとかして次の画面に遷移した後に、ブラウザの戻るボタン(バックボタン)でフォームの画面に戻ると、ユーザーが入力していたフォームデータが残っているという動作をします。

このHTMLを表示してドロップダウンで例えば「5」を選択してsubmitし(googleに遷移します)、ブラウザのバックボタンで戻ると、ドロップダウンは「5」が選択されている状態になります。(この動作は、たぶんBack Forward Cache 機能によるものでしょう)

1. 「5」を選んで…
   
2. ボタンを押してSubmitします。action=”https://www.google.co.jp”なので、Googleに遷移します。
   
3. ブラウザのバックボタンで元の画面に戻ると、「5」が選択されています。
   

フォーム画面から進んで、戻って修正して…という通常の操作を考えると、画面遷移直前のフォーム状態を覚えていてくれるこの動作はありがたいのですが、バックボタンで戻ったときにフォームの状態を忘れていて欲しいケースもあります。

例えば、ドロップダウンのonchangeで同じページへPostして状態を変更していくケースとかだと、バックボタンで一つ前の状態に画面を戻しても、ドロップダウンの状態は最後の状態になったりするわけです。困りますね。そういう場合はバックボタンで戻ったときにフォームの状態は忘れていて欲しいということになります。

このようなケースではonpageshowイベントでフォームをリセットするといい感じになります。
こんな感じに。

注意

ターゲットブラウザで onpageshow がサポートされているか、要確認です。