jQueryでページから離脱する際に確認メッセージを表示する

 Wordpressなんかそうだけど、投稿画面で入力中にページ移動しようとすると確認メッセージが出る。
 愛用しているThinkPadも、カーソルキーの上キーの左右がページ前後移動キーになっているので誤って押したり、マウスのスイッチで入力中にページ移動してしまって入力したフォームが消えてしまうアクシデントがあるので、この角にメッセージが出るのはなかなか便利。

 これを自分のページに実装するのは簡単で、

$(window).bind("beforeunload", function(e) {
    return "入力内容はまだ保存されていません、ページ移動しますか?";
});

のようにして、メッセージをreturnすると、その内容を表示したポップアップが出てくれる。 AlertとかConfirmとか書いてもChromeには無視された。

 このままだと常時出てしまうので、登録ボタンを押した場合にはメッセージを表示しないようにするために、

<input type=’submit’ onclick=’javascript:$("body").append("<input type=\"hidden\" name=\"no_unload_confirm\" value=\"1\">");’>

みたいにsubmitボタンのonclickで正常動作フラグを立てて

$(window).bind(‘beforeunload’, function(evnt){
    if(!$(‘input[name=no_unload_confirm]’).val()) return ‘入力内容はまだ保存されていません、ページ移動しますか?’;
});

みたいにフラグが立っているかチェックするようにすれば良い。

(140)


カテゴリー: jQuery   タグ: ,   この投稿のパーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です