Attivazione di ONBeforeUnload SOLO quando i valori dei campi sono cambiati

Question

Quello che sto cercando di ottenere è di avvisare l'utente delle modifiche non salvate se tenta di chiudere una pagina o di spostarsi da essa senza salvare prima.

Sono riuscito a visualizzare la finestra di dialogo OnBeforeUnload() ... ma non voglio che venga visualizzata affatto se l'utente non ha modificato alcun valore di campo. Per questo, sto utilizzando questo campo di input nascosto chiamato is_modified che inizia con un valore predefinito di false e passa a true quando un campo è modificato.

Ho tentato di associare l'evento a in questo campo is_modified per provare a rilevare la modifica del valore ... e solo dopo attivare OnBeforeUnload.

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

Ma da quello che ho dato è che l'evento change() funziona solo dopo questi 3 punti - un campo riceve il focus, un valore non è cambiato e il campo perde concentrarsi. Nel caso del campo di input nascosto, non sono sicuro di come questa parte di focus ricevente e perdente funzioni! Quindi, la funzione onbeforeunload non viene mai attivata.

Qualcuno può suggerire un modo per mantenere un trigger su is_modified?

Grazie.

Answer 1

Prova la tua logica in un modo diverso. Significa, metti la logica per controllare il valore del campo di input nel tuo metodo 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

perché non hanno la chiamata onbeforeunload una funzione che controlla se i valori sono cambiati, e in tal caso restituire i "modifiche non salvate" confermare?

Answer 3

Utilizziamo solo Window.onbeforeunload come flag "modificato". Ecco quello che stiamo facendo, (utilizzando 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 è possibile utilizzare istruzione return semplice (ri) che non visualizzare qualsiasi finestra di dialogo. felice di codifica ..

Answer 5

ho avuto un requisito analogo così si avvicinò con seguente script 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; 
}); 

Il codice di cui sopra controlla la variabile needToConfirm, se true allora verrà visualizzato un messaggio di avviso. Ogniqualvolta il valore input, select o textarea viene modificato, la variabile needToConfirm è impostata su true.

---

PS: Firefox> 4 non consentono messaggio personalizzato per onbeforeunload.
Riferimento: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

---

UPDATE: Se siete un freak prestazioni, amerete @KyleMit's suggerimento. Ha scritto un'estensione jQuery only() che verrà eseguita una sola volta per qualsiasi elemento.

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

I seguenti funziona bene 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.";   
    } 
} 

E se l'utente sta inviando un modulo per salvare le modifiche, si potrebbe desiderare di aggiungere questo (cambio #mainForm alla ID della forma che 're la presentazione):

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

Sopra funziona per me.