【jQuery/JS】ページ離脱時にアラートを表示する完全ガイド｜beforeunload・フォーム未保存・条件付き発火・解除まで

フォームへの入力途中にうっかりページを閉じてしまった経験は誰でもあります。beforeunload イベントを使えば、ページを離れる直前にブラウザの確認ダイアログを表示し、未保存データの損失を防ぐことができます。この記事では基本的な実装から、フォーム変更時のみ発火させる方法・解除方法・注意点まで解説します。

基本: beforeunloadイベントでページ離脱を検知する

beforeunload イベントはページを閉じる・別URLに遷移する・リロードする直前に発火します。イベントハンドラ内で event.preventDefault() を呼ぶことで確認ダイアログが表示されます。

$(function () {
  $(window).on('beforeunload', function (e) {
    // preventDefault() で確認ダイアログを表示する
    e.preventDefault();
    // 一部の古いブラウザ対応で returnValue も設定する
    e.returnValue = '';
  });
});

フォームが変更された場合のみアラートを表示する（推奨パターン）

常にアラートが出るとユーザーにとって煩わしくなります。フォームが実際に変更された場合のみアラートを出す実装が推奨です。

$(function () {
  var isDirty = false; // フォームが変更されたかのフラグ

  // フォームの入力・変更を検知
  $('form').on('input change', function () {
    isDirty = true;
  });

  // ページ離脱時: 未保存の変更がある場合のみ確認
  $(window).on('beforeunload', function (e) {
    if (isDirty) {
      e.preventDefault();
      e.returnValue = '';
    }
  });

  // 保存ボタンクリック時: フラグをリセット（送信成功後）
  $('form').on('submit', function () {
    isDirty = false; // 送信したので離脱確認不要
  });
});

保存完了後・特定の操作でアラートを解除する

$(function () {
  var isDirty = false;
  var handler = function (e) {
    e.preventDefault();
    e.returnValue = '';
  };

  $('form').on('input change', function () {
    if (!isDirty) {
      isDirty = true;
      // ハンドラーを登録
      $(window).on('beforeunload', handler);
    }
  });

  // 保存ボタンクリック後: ハンドラーを削除して解除
  $('#save-btn').on('click', function () {
    isDirty = false;
    $(window).off('beforeunload', handler); // ハンドラーを解除
  });

  $('form').on('submit', function () {
    isDirty = false;
    $(window).off('beforeunload', handler);
  });
});

Ajaxで自動保存している場合

入力内容を一定間隔でAjax自動保存している場合は、最後の保存以降に変更があった場合のみアラートを出します。

$(function () {
  var isDirty = false;

  $('form').on('input change', function () {
    isDirty = true;
  });

  // 30秒ごとに自動保存
  setInterval(function () {
    if (!isDirty) return;

    $.ajax({
      url: '/api/autosave',
      method: 'POST',
      data: $('form').serialize(),
      success: function () {
        isDirty = false; // 保存完了でフラグをリセット
        console.log('自動保存完了');
      }
    });
  }, 30000);

  $(window).on('beforeunload', function (e) {
    if (isDirty) {
      e.preventDefault();
      e.returnValue = '';
    }
  });
});

使用上の注意点と制限事項

まとめ

beforeunload イベントを使ったページ離脱アラートの実装ポイントをまとめます。

• 基本: e.preventDefault(); e.returnValue = ""; で確認ダイアログを表示
• 推奨: isDirty フラグで「フォーム変更時のみ」発火させる
• 解除: 保存・送信後は isDirty = false + $(window).off("beforeunload", handler)
• カスタムメッセージは現代ブラウザでは表示できない（ブラウザ標準文言のみ）

関連記事: フォームバリデーション完全ガイド / ページがロードされたときに処理を実行する方法 / POSTリクエストを送信する方法

よくある質問（FAQ）