No.230

フォーム入力系の作業し忘れを防ぐ特効薬

　入力フォームのある画面で他のページに移動しようとすると警告を出してくれるサイトが増えてきた。

　これはJavaScriptの標準機能として提供されている、ページ移動を検知しその前に発動するイベントを用いて実装されている。

　理屈が分かってしまえば簡単なので、積極的に導入すべし。

監視するイベント

　その名もズバリbeforeunloadという名前のイベントだ。

　addEventListenerや

window.addEventListener('beforeunload', function(e) {
  e.returnValue = '保存忘れはありませんか？';
}, false);

　jQueryのonで監視できる。

$(window).on('beforeunload', function(e) {
  e.returnValue = '保存忘れはありませんか？';
});

保存されたら監視を解除する

　イベントハンドラを作成し、フォームのsubmitが押されたらイベントハンドラを削除してやればいい。
　jQueryで例を書くと以下のようになる。

// ハンドラ作成
var handler = function(e) {
  return '保存忘れはありませんか？';
};

// イベント監視開始
$(window).on('beforeunload', handler);

// イベント監視解除
$('#フォームのID').on('submit', function(e) {
  $(window).off('beforeunload', handler);
});

警告メッセージ

　画面に表示されるメッセージだが、以前は下記の方法で変更できていたようだ。（試せないのでネット上の情報による）

• イベントのreturnValueにメッセージを設定する。
• returnでメッセージを返却する。

　ブラウザによって挙動が違ううえに、2017年6月現在ではChromeなどはデフォルトメッセージしか表示されなくなっている。

　あまり気にせず、機能が利用できればいいと割り切ろう。