OnBeforeUnload wird nur aktiviert, wenn sich die Feldwerte geändert haben

Question

Was ich erreichen möchte, ist den Benutzer nicht gespeicherter Änderungen zu warnen, wenn er versucht, eine Seite zu schließen oder sich von dieser zu entfernen, ohne vorher zu speichern.

Ich habe es geschafft, den OnBeforeUnload() Dialog auf Pop-up zu bekommen ... aber ich will nicht, dass es überhaupt angezeigt wird, wenn der Benutzer keine Feldwerte geändert hat. Dazu verwende ich dieses versteckte Eingabefeld is_modified genannt, die mit einem Standardwert von falsch beginnt und Flips zu wahr wenn alle Felder bearbeitet wird.

Ich habe versucht, die Änderung Ereignis zu diesem is_modified Feld zu versuchen und für Wertänderung zu erkennen ... und erst dann aktivieren OnBeforeUnload.

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

Aber von dem, was ich meine, ist, dass die change() Ereignis erst nach diesen 3 Schritten arbeitet - ein Feld den Fokus erhält, wird ein Wert geändert und das Feld verliert konzentrieren. Im Falle des versteckten Eingabefeldes bin ich mir nicht sicher, wie dieser empfangende und verlierende Fokus funktioniert! Daher wird die onbeforeunload-Funktion niemals aktiviert.

Kann jemand vorschlagen, einen Trigger über is_modified zu erhalten?

Danke.

Answer 1

Versuchen Sie Ihre Logik auf eine andere Art und Weise. Stellen Sie die Logik für die Überprüfung des Wertes des Eingabefeldes in Ihrer onbeforeunload Methode ein.

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

warum haben die nicht onbeforeunload Aufruf einer Funktion, die sich geändert haben, wenn die Werte überprüft, und wenn ja, die „ungesicherte Änderungen“ Rückkehr bestätigen?

Answer 3

Wir verwenden Window.onbeforeunload als unsere "geändert" -Flagge. Hier ist, was wir tun, (mit 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

in IE9 können Sie einfache return-Anweisung (re) verwendet werden, die keine Dialogfenster angezeigt wird. glücklich Codierung ..

Answer 5

Ich hatte eine ähnliche Anforderung so mit folgenden jQuery Skript kam:

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

Der obige Code überprüft die needToConfirm Variable, wenn seine true dann wird es Warnmeldung angezeigt werden soll. Wenn input, select oder textarea Elemente Wert geändert wird, wird needToConfirm Variable auf true gesetzt.

---

PS: Firefox> 4 nicht benutzerdefinierte Nachricht für onbeforeunload ermöglichen.
Referenz: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

---

UPDATE: Wenn Sie ein Performance-Freak sind, werden Sie @KyleMit's Vorschlag lieben. Er schrieb eine jQuery-Erweiterung only(), die nur einmal für jedes Element ausgeführt wird.

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

Folgende Arbeiten gut in 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.";   
    } 
} 

Und wenn der Benutzer ein Formular einreicht die Änderungen zu speichern, könnten Sie diesen (ändern #mainForm auf die ID des Formulars hinzufügen möchten sie ‚neu vorzulegen):

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

oben für mich funktioniert.