javascript(jQuery)：ページ離脱時にアラートを出す方法

申し込みフォームなどの情報を入力する画面で、途中まで入力したけどうっかり戻ったら入力内容がなくなってしまった。などということがあるかと思います。再度入力するのは面倒だからやっぱりやめた、となってしまうとサイト運営側からすると大変損失なので、防ぐ方法の一つとして入力中の情報がある場合にページ離脱時にアラートを表示させる方法を掲載します。

実装方法

ページ離脱のアクションを拾う

$(function(){
  $(window).on('beforeunload', function() {
    return "ページを閉じようとしています。\n
            入力した情報が失われますがよろしいですか？";
  });
});

このように記載するとページ離脱時にreturnに記載した文字列で警告が表示されます。

情報が入力されている場合のみ警告を表示する

上記の方法だと、まだ何も入力していなかったとしても警告が表示されてしまいますので、フォームに何かしら入力が合った場合のみ警告が出るようにします。

$(function(){
  changeFlg = false;
  $(window).on('beforeunload', function() {
    //変更がある場合のみ警告をだす
    if (changeFlg) {
      return "ページを閉じようとしています。\n
              入力した情報が失われますがよろしいですか？";
    }
  });
  
  //フォームの内容が変更されたらフラグを立てる
  $("form input, form textarea, form select").change(function() {
    changeFlg = true;
  });
})

特定のボタンクリック時は表示させないようにする

上記のままだと、「入力⇒確認⇒完了」の様な順序で登録をする場合に、次のページに進む際にも警告が表示されてしまいます。これを回避するためには次のようにします。

$(function(){
  changeFlg = false;
  $(window).on('beforeunload', function() {
    //変更がある場合のみ警告をだす
    if (changeFlg) {
      return "ページを閉じようとしています。\n
              入力した情報が失われますがよろしいですか？";
    }
  });
  
  //フォームの内容が変更されたらフラグを立てる
  $("form input, form textarea, form select").change(function() {
    changeFlg = true;
  });

  //特定のボタンが押された場合はフラグを落とす
  $("input[type=submit]").click(function() {
    changeFlg = false;
  });
});

submitをクリックした場合はフラグがfalseになるのでページ遷移しますが警告は出なくなります。

submitアクションを補足すると入力内容のチェックとかもできるので、またの機会に掲載したいと思います。