[jQuery] ページを離れる際に確認メッセージを出す方法

この記事ではページを離れる際に、確認のメッセージを表示させる方法について書いています。また、それを少し改良して、入力内容に変更があった場合のみ同確認メッセージを表示させるサンプルを載せています。

目次

  1. ページ離脱時に確認メッセージを表示させる方法
  2. 変更のあった場合のみ確認メッセージを表示させる方法
  3. サンプルコード

ページ離脱時に確認メッセージを表示させる方法

このサンプルではjQueryを使ってやります。やり方は簡単で、jQueryのbind関数を使って「beforeunload」に対して関数をバインドさせます。そして、その関数の戻り値として、確認メッセージとして表示させたい文字列を返してあげるだけです。ただし、ブラウザによっては戻り値に指定した文字列が無視されるものもありました。

$(window).bind("beforeunload", function() {
  // 確認メッセージに表示させたい文字列を返します。
  return "表示させたい文字列";
});

↑ 目次に戻る

変更のあった場合のみ確認メッセージを表示させる方法

上記サンプルを少しだけ修正して、入力欄が変更された場合のみ確認メッセージを出すようにしてみます。入力欄の変更はjQueryの「change」関数で検出できるので、その際にフラグを変更します。そして、そのフラグの値を見て、離脱時のメッセージを表示するかどうかを決めれば完成です。

$(function() {
  // フォームの入力欄が更新されたかどうかを表すフラグです。
  var isChanged = false;

  $(window).bind("beforeunload", function() {
    console.log(isChanged);
    if (isChanged) {
      // isChangedフラグがtrueの場合、つまり入力内容が変更されていた
      // 場合のみ文字列を返すようにします。
      return "このページを離れようとしています。";
    }
  });

  $("form input, form select, form textarea").change(function() {
    // 入力内容が更新されている場合は、isChangedフラグをtrueにします。
    isChanged = true;
  });
});

ただし、このままだと、フォームをサブミットした時にも、確認メッセージが表示されてしまいます。そのため、サブミットするボタンがクリックされた時点で、フラグを落としておく必要があります。

  $("button[type=submit]").click(function() {
    // フォームをサブミットする前にフラグを落とします。
    // ※ これをやらないと、サブミット時に確認メッセージが表示されてしまいます。
    isChanged = false;
  });

↑ 目次に戻る

サンプルコード

最後に今回のサンプルをzipで固めたもののリンクと、入力欄に変更があった場合に確認メッセージを表示させるサンプルのコードを載せておきます。

サンプルコード

sample2.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>Form</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="beforeunload2.js"></script>
  </head>
  <body>
    <form method="post" action="#">
      <div class="field_wrapper">
        <p>名前: </p>
        <input type="text" name="name" />
      </div>
      <div class="field_wrapper">
        <p>メールアドレス: </p>
        <input type="text" name="name" />
      </div>
      <div class="field_wrapper">
        <p>種類</p>
        <select>
          <option value="0">選択肢1</option>
          <option value="1">選択肢2</option>
          <option value="2">選択肢3</option>
          <option value="3">選択肢4</option>
          <option value="4">選択肢5</option>
        </select>
      </div>
      <div class="field_wrapper">
        <p>お問い合わせ内容</p>
        <textarea rows="3"></textarea>
      </div>
      <div class="button_wrapper">
        <button type="submit">登録</button>
      </div>
    </form>
  </body>
</html>

beforeunload_2.js

$(function() {
  // フォームの入力欄が更新されたかどうかを表すフラグです。
  var isChanged = false;

  $(window).bind("beforeunload", function() {
    console.log(isChanged);
    if (isChanged) {
      // isChangedフラグがtrueの場合、つまり入力内容が変更されていた
      // 場合のみ文字列を返すようにします。
      return "このページを離れようとしています。";
    }
  });

  $("form input, form select, form textarea").change(function() {
    // 入力内容が更新されている場合は、isChangedフラグをtrueにします。
    isChanged = true;
  });

  $("button[type=submit]").click(function() {
    // フォームをサブミットする前にフラグを落とします。
    // ※ これをやらないと、サブミット時に確認メッセージが表示されてしまいます。
    isChanged = false;
  });
})

↑ 目次に戻る

この記事が役に立った場合、シェアしていただけると励みになります!!