途中入力離脱防止処理 JavaScript

投稿日：2017年8月24日更新日：2020年5月6日

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。

この場合のJavaScriptのイベントはbeforeunloadらしいですね。ちなみにブラウザの戻るボタン、閉じるボタンでも有効に動きますのでかなり使えます。

Contents

1 ソース
2 注意点
3 参考リンク

ソース

$(function() {

    //通常の関数
    var onBeforeunloadHandler = function(e) {
        e.returnValue = '不正な離脱です。';
    };
    
    //フラグでイベントのON/OFFを切り替えたいとき
    var onBeforeunloadHandler = function(e) {
       if( flg ) e.returnValue = '不正な離脱です。'
    }    

    //ここでイベントリスナーを設定します。
    //beforeunloadはページを閉じるときすべてに働きます。
    $(window).on('beforeunload', onBeforeunloadHandler, false);

    //イベントを外すとき 例えば通常の投稿のようなケース
    //(フラグを使わないときはこれで外しましょう)
    $("form").click(function(){
        $(window).off('beforeunload');
        $('form').submit();
    });

$(function() {

//通常の関数

var onBeforeunloadHandler = function(e) {

e.returnValue = '不正な離脱です。';

};

//フラグでイベントのON/OFFを切り替えたいとき

var onBeforeunloadHandler = function(e) {

if( flg ) e.returnValue = '不正な離脱です。'

}

//ここでイベントリスナーを設定します。

//beforeunloadはページを閉じるときすべてに働きます。

$(window).on('beforeunload', onBeforeunloadHandler, false);

//イベントを外すとき例えば通常の投稿のようなケース

//(フラグを使わないときはこれで外しましょう)

$("form").click(function(){

$(window).off('beforeunload');

$('form').submit();

});

注意点

文字入力や画面になんらかのアクションがないと、離脱防止は動きません。開いて何もせずに「戻る」を押してしまうと、何も起きずに離脱してしまいます。そのため入力がないページでは意味がないです。(そんなケースで使うことはあまりないかと思いますが、自分がそのケースで結構ハマりました。)
表示できる文言はどうやらブラウザによってはディフォルトから変更できないものもあるようです。
そのままだと通常の投稿の時のもイベントが起こってしまいますので、$(window).offでイベントをはずすか、フラグを使ってフラグがたっているときのみ処理を行います。
イベントを一旦外すとつけられません。通常の投稿ボタンではイベントを外すかと思いますが、キャンセルをしたときは外れたままになってしまいます。

参考リンク

ページ離脱防止のためにJavaScriptでアラートを表示する
 ブラウザの閉じるイベント時に何かしたいのでbeforeunloadを使ってみる