Aktywowanie TYLKO OnFefore przy zmianie wartości pól

Question

Co próbuję osiągnąć, to ostrzec użytkownika o niezapisanych zmianach, jeśli spróbuje zamknąć stronę lub odejść od niej bez uprzedniego zapisania.

Udało mi się otworzyć okno dialogowe OnBeforeUnload() ... ale nie chcę, aby było ono wyświetlane, jeśli użytkownik nie zmodyfikował żadnych wartości pól. W tym celu używam tego ukrytego pola wejściowego o nazwie is_modified, które zaczyna się od wartości domyślnej false i zmienia się na true, gdy dowolne pole jest edytowane.

Próbowałem powiązać zdarzenie zmienić do tego pola jest zmodyfikowane, aby spróbować wykryć zmianę wartości ... i tylko wtedy aktywować OnBeforeUnload.

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

Ale z tego co mi zrozumieć to, że zdarzenie change() działa dopiero po tych 3 krokach - pole odbiera skupić wartość zostanie zmieniona, a pole traci ostrość. W przypadku ukrytego pola wejściowego nie jestem pewien, jak działa ta funkcja odbierania i utraty ostrości! Dlatego funkcja onbeforeunload nigdy nie jest aktywowana.

Czy ktokolwiek może sugerować sposób na utrzymanie spustu na poziomie jest zmodyfikowany?

Dzięki.

Answer 1

Wypróbuj swoją logikę w inny sposób. Znaczenie: ustaw logikę dla sprawdzania wartości pola wejściowego w metodzie 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

dlaczego nie ma połączenia onbeforeunload funkcję, która sprawdza, czy wartości uległy zmianie, a jeśli tak zwrotu „niezapisane zmiany” potwierdzić?

Answer 3

Po prostu używamy Window.onbeforeunload jako naszej flagi "zmienionej". Oto, co robimy, (używając 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

w IE9 można używać prostych instrukcji return (RE), które nie będą wyświetlane żadne okno dialogowe. szczęśliwy kodowania ..

Answer 5

miałem podobny wymóg więc wymyślił poniższego skryptu 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; 
}); 

Powyższy kod sprawdza zmienną needToConfirm, jeśli jej true następnie wyświetli komunikat ostrzegawczy. Po każdej zmianie wartości elementów elementu needToConfirm jest ustawiana na true.

---

PS: Firefox> 4 nie pozwalają na niestandardową wiadomość dla onbeforeunload.
referencyjny: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

---

UPDATE: Jeśli jesteś maniakiem wydajność, pokochasz @KyleMit's sugestię. Napisał rozszerzenie jQuery only(), które zostanie wykonane tylko raz dla dowolnego elementu.

$.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

Poniższe działa dobrze w 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.";   
    } 
} 

A jeśli użytkownik próbuje wysłać formularz, aby zapisać zmiany, warto dodać ten (zmiana #mainForm do identyfikatora formularza oni „re złożenie):

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

Przede pracuje dla mnie.