Активация OnBeforeUnload ТОЛЬКО при изменении значений поля

То, что я пытаюсь достичь, - предупредить пользователя о несохраненных изменениях, если он пытается закрыть страницу или перейти от нее, не сохраняя в первую очередь.

Мне удалось открыть диалог OnBeforeUnload()... но я не хочу, чтобы он отображался вообще, если пользователь не изменил значения полей. Для этого я использую это скрытое поле ввода is_modified, которое начинается со значения по умолчанию false и переворачивается до true, когда какое-либо поле изм.

Я попытался связать событие change в этом поле is_modified, чтобы попытаться обнаружить изменение значения... и только затем активировать OnBeforeUnload.

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

Но из того, что я считаю, событие change() работает только после этих трех шагов - поле получает фокус, значение изменяется и поле теряет фокус. В случае скрытого поля ввода, я не уверен, как это происходит и теряется часть фокуса! Следовательно, функция onbeforeunload никогда не активируется.

Может ли кто-нибудь предложить способ поддержания триггера по is_modified?

Спасибо.

Ответы

Ответ 1

У меня было аналогичное требование, поэтому появился следующий jQuery script:

$(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, select или textarea изменяется, переменная needToConfirm устанавливается на true.

PS: Firefox > 4 не разрешать настраиваемое сообщение для onbeforeunload.
Ссылка: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

ОБНОВЛЕНИЕ: Если вы являетесь игроком производительности, вам понравится @предложение KyleMit. Он написал расширение jQuery only(), которое будет выполняться только один раз для любого элемента.

$.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;
});

Ответ 2

Мы просто используем 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."  
}

Ответ 3

В 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;
});

Ответ 4

$(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');
});

Над работами Для меня.

Ответ 5

Попробуйте свою логику по-другому. Смысл, поставьте логику для проверки значения поля ввода в вашем методе 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 
    } 
};

Ответ 6

почему бы не вызвать onbeforeunload функцию, которая проверяет, изменились ли значения, и если это так, подтвердите "несохраненные изменения"?

Ответ 7

в IE9 вы можете использовать простой оператор return (re), который не отображает диалоговое окно. счастливое кодирование..