超まとめ
バックボタンで戻ったときにフォームの状態を忘れていて欲しい場合は、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 機能によるものでしょう)
- 「5」を選んで…
- ボタンを押してSubmitします。action=”https://www.google.co.jp”なので、Googleに遷移します。
- ブラウザのバックボタンで元の画面に戻ると、「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 がサポートされているか、要確認です。
One Reply to “[Web]戻るボタンでフォームが残っているのが困る場合の対処”