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

超まとめ

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

説明

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

<html>
  <head></head>
  <body>
    <form method="GET" action="https://www.google.co.jp">
      <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
      </select>
      <input type="SUBMIT" value="type=submit" >
    </form>
  </body>
</html>

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

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

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

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

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

<html>
  <head>
  </head>
  <body>
    <script>
      window.onpageshow = function(){
        document.getElementById("f1").reset();
      };
    </script>
    <form method="GET" action="https://www.google.co.jp" id="f1">
      <select name="select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
      </select>
      <input type="SUBMIT" value="type=submit"/>
    </form>
  </body>
</html>

注意

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

コメントを残す