ページを移動(離脱)するときにjQueryで警告を出す方法

ページを移動(離脱)するときにjQueryで警告を出す方法

Posted at March 11,2013 12:55 AM
Tag:[beforeunload, jQuery]

Facebookなどでフォーム入力中にページを移動(離脱)しようとすると警告が表示されます。

Facebook

この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。

1.ページを移動するときに警告を出す

ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $(window).on('beforeunload', function() {
        return '投稿が完了していません。このまま移動しますか?';
    });
});
</script>
<form method="post" action="foo.cgi">
<input type="text" value="" />
<input type="submit" value="送信" />
</form>

ブラウザによってはreturn時の文字列が表示されます。下のスクリーンショットはGoogle Chromeの例です。

Google Chrome

beforeunloadは、unloadしていいかどうかを尋ねるためのイベントで、HTML5の6.1.6に掲載されています。

6.1.6 Events

2.フォーム送信時に警告が出ないようにする

1項の実装だけではフォーム送信時にも警告が出てしまいます。

フォーム送信時に警告が出ないようにするには、例えばclickイベントを使って、送信時にbeforeunloadイベントを無効にします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $(window).on('beforeunload', function() {
        return '投稿が完了していません。このまま移動しますか?';
    });
    $("input[type=submit]").click(function() {
        $(window).off('beforeunload');
    });
});
</script>
<form method="post" action="foo.cgi">
<input type="text" value="" />
<input type="submit" value="送信" />
</form>

3.フォームに入力があったときだけ警告を出すようにする

2項までの実装だけでは、フォームの入力有無に関わらず警告が出てしまいます。

フォームに入力があったときだけ警告を出すようにするには、1項で実装したonイベントをフォームのchangeイベントなどでラップします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $("input[type=text]").change(function() {
        $(window).on('beforeunload', function() {
            return '投稿が完了していません。このまま移動しますか?';
        });
    });
    $("input[type=submit]").click(function() {
        $(window).off('beforeunload');
    });
});
</script>
<form method="post" action="foo.cgi">
<input type="text" value="" />
<input type="submit" value="送信" />
</form>

これで次のような挙動になります。

  • フォームに入力がない場合にページ移動:警告非表示
  • フォーム入力後にページ移動:警告表示
  • フォーム送信時:警告非表示

フォームの入力文字が空になったらbeforeunloadイベントをoffにするように変更すれば、よりきめ細かい制御ができると思います。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)