ブラウザバックの挙動

ウェブサイトではページ読込み時の動作でリンクを押す以外にブラウザで戻る（進む）といったパターンもありますよね。利用者側に誤解を与えない挙動を実現したい場合は１つ１つの動きを確認しながら細部まで制御していかなければなりません。

たとえば投票システム内に「選択項目の並び順を自動で切り替える機能」があります。

本設定は項目順をランダム表示することで投票時の偏りを減らすために実装された機能ですがブラウザ操作で選択が入れ替わる可能性も出てきますよね。

下記はブラウザバック時のリセットに使えます。

window.addEventListener('pageshow', function(event) {
	document.querySelectorAll('[name="data[]"]').forEach(function(element) {
		element.checked = false;
	});
});

ただし、ブラウザの戻るや進む操作を行った際に実行される命令なのでリセット処理にタイムラグが発生したりと適用範囲を考えれば色々厄介です。

現実的には仕様に最適化した処理を選ぶのが吉。

今回は「チェックボックスもラジオボタンも含め両方に対して強制的にリセットする」という方法を採用いたしました。厳密な運用を予定していなければブラウザバックの挙動まで制御しなくても問題ありません。このあたりは各仕様でも変わるはずです。

重要なのはユーザー側が行うであろう操作を先回り設計しておくことかもしれません。