22

私が達成しようとしているのは、ユーザーがページを閉じようとしたり、最初に保存せずにページから移動しようとした場合に、保存されていない変更をユーザーに警告することです。

ダイアログをポップアップさせることができましOnBeforeUnload()た...しかし、ユーザーがフィールド値を変更していない場合は、ダイアログをまったく表示したくありません。このために、デフォルト値のfalseで始まり、フィールドが編集されるとtrueに変わる is_modifiedという隠し入力フィールドを使用しています。

変更イベントをこの is_modified フィールドにバインドして、値の変更を検出しようとしました...そして、OnBeforeUnload を有効にしました。

$( '#is_modified' ).change( function() {
    if( $( '#is_modified' ).val() == 'true' )
        window.onbeforeunload = function() { return "You have unsaved changes."; }
});

しかし、私が理解していることから、change()イベントはこれらの 3 つのステップの後にのみ機能するということです。フィールドがフォーカスを受け取り、値が変更され、フィールドがフォーカスを失います。非表示の入力フィールドの場合、このフォーカスの受け渡し部分がどのように機能するのかわかりません! したがって、onbeforeunload 関数がアクティブになることはありません。

is_modified でトリガーを維持する方法を提案できる人はいますか?

ありがとう。

4

7 に答える 7

31

同様の要件があったため、次の jQuery スクリプトを思いつきました。

$(document).ready(function() {
    needToConfirm = false; 
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here 
        return "Your unsaved data will be lost."; 
    }
}

$("select,input,textarea").change(function() {
    needToConfirm = true;
});

上記のコードはneedToConfirm変数をチェックし、その場合trueは警告メッセージを表示します。または要素の値が変更されるたびinputに、変数は に設定されます。 selecttextareaneedToConfirmtrue

PS: Firefox > 4 では、 のカスタム メッセージは許可されませんonbeforeunload。
参照: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

更新:あなたがパフォーマンス フリークなら、@KyleMit の提案が気に入るはずです。only()彼は、任意の要素に対して 1 回だけ実行されるjQuery 拡張機能を作成しました。

$.fn.only = function (events, callback) {
    //The handler is executed at most once for all elements for all event types.
    var $this = $(this).on(events, myCallback);
    function myCallback(e) {
        $this.off(events, myCallback);
        callback.call(this, e);
    }
    return this
};    

$(":input").only('change', function() {
    needToConfirm = true;
});
于 2011-07-05T07:51:23.053 に答える
7

Window.onbeforeunload「変更された」フラグとして使用します。これが私たちが行っていることです（lowproを使用）：

Event.addBehavior({
  "input[type=radio]:change,input[type=text]:change,input[type=checkbox]:change,select:change": function(ev) {
       window.onbeforeunload = confirmLeave;
  }
  ".button.submit-button:click": function(ev) {
       window.onbeforeunload = null;
  },
});


function confirmLeave(){
    return "Changes to this form have not been saved. If you leave, your changes will be lost."  
}
于 2009-06-18T14:40:16.180 に答える
6

以下は jQuery でうまく機能します。

var needToConfirm = false;

$("input,textarea").on("input", function() {
  needToConfirm = true;
});

$("select").change(function() {
  needToConfirm = true;
});

window.onbeforeunload = function(){        
  if(needToConfirm) {
    return "If you exit this page, your unsaved changes will be lost.";        
  }
}

また、ユーザーが変更を保存するためにフォームを送信している場合は、これを追加することをお勧めします (#mainForm送信しているフォームの ID に変更します)。

$("#mainForm").submit(function() {
  needToConfirm = false;
});
于 2013-05-25T14:19:31.027 に答える
3 
$(window).bind('beforeunload',function() {
 return "'Are you sure you want to leave the page. All data will be lost!";
});

$('#a_exit').live('click',function() {
    $(window).unbind('beforeunload');
});

上記の作品は私のために。

于 2014-05-10T07:18:14.153 に答える
1

別の方法でロジックを試してください。つまり、入力フィールドの値をチェックするためのロジックをonbeforeunloadメソッドに入れます。

window.onbeforeunload = function () { 
    if ($("#is_modified").val() == 'true') { 
        return "You have unsaved changes."; 
    } else { 
        return true; // I think true is the proper value here 
    } 
};
于 2009-05-29T09:19:21.907 に答える
0

onbeforeunload値が変更されたかどうかをチェックする関数を呼び出して、変更された場合は「保存されていない変更」を確認しないのはなぜですか?

于 2009-05-29T09:19:35.900 に答える
0

IE9 では、ダイアログ ボックスを表示しない単純な return ステートメント (re) を使用できます。幸せなコーディング..

于 2011-06-06T08:05:06.653 に答える