ブラウザの閉じるイベント時に何かしたいのでbeforeunloadを使ってみる

例えばフォーム入力中だとか、
ショートカットを押し間違えたとか、
意図しないタイミングでブラウザ閉じてしまうとか色々とあるわけで。
そういうときってあぁ〜って感じでちょっとがっかりしたりする。

でもGmailみたいに本当に閉じますか？みたいな感じでアラート出してくれると助かるわけで。
というわけで今日はその組み方的なお話。

//jQuery
$(document).ready(function(){
  $(window).on("beforeunload",function(e){
    return "本当に離れますか？";
  });
});

//javascriptで普通に書く場合
window.onbeforeunload = function(){
  return "本当に離れますか？";
}

っていう感じ。
要注意なのは何があっても最後に行われるイベントであるので、
これを書いているとどうやっても回避する事が出来なくなる。
なので出す必要が無いときに出てしまう事があるので下のように書いて回避する必要あり。

var flg = 0;
$(document).ready(function(){
  $(window).on("beforeunload",function(e){
    if(flg) return "本当に離れますか？";
  });

  $("input#hoge").on("blur",function(e){
    if($(this).val()){
      flg = 1;
    }
  });
});

これでid=hogeのテキストボックスが入力されていたら本当に離れますか？と出るようになった。

これを応用するとしたら、
入力していた内容をlocalstorageに保存して再度そのページに訪れたときに読み込んであげるみたいな。
もちろんsubmitをしてないとか正規の抜け方じゃないとき限定だけど。

こういった小さいことをコツコツ設定しておくと人にとって使いやすいサイトになるわけですしおすし。