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

Question

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

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

Я попытался связать событие событие в это поле 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?

Спасибо.

Answer 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 
    } 
}; 

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

У меня было подобное требование так придумали следующий скрипт 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, select или textarea изменяется, значение needToConfirm равно true.

---

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

---

UPDATE: Если вы урод производительность, вы будете любить @KyleMit's предложение. Он написал расширение 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; 
}); 

Answer 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 идентификатору формы они «повторно представления):

$("#mainForm").submit(function() { 
    needToConfirm = false; 
}); 

Answer 7

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

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