javascript - leave - Activando OnBeforeUnload SOLAMENTE cuando los valores de campo han cambiado

onbeforeunload angular 5

Question

Lo que intento lograr es advertir al usuario de cambios no guardados si intenta cerrar una página o salir de ella sin guardar primero.

OnBeforeUnload() hacer OnBeforeUnload() diálogo OnBeforeUnload() ... pero no quiero que se muestre si el usuario no ha modificado ningún valor de campo. Para esto, estoy usando este campo de entrada oculto llamado is_modified que comienza con un valor predeterminado de falso y cambia a verdadero cuando se edita cualquier campo.

Intenté vincular el evento de cambio a este campo is_modified para intentar detectar el cambio de valor ... y solo luego activar OnBeforeUnload.

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

Pero por lo que creo es que el evento change() funciona solo después de estos 3 pasos: un campo recibe el foco, un valor se cambia y el campo pierde el foco. En el caso del campo de entrada oculto, ¡no estoy seguro de cómo funciona esta pieza de enfoque de recepción y pérdida! Por lo tanto, la función onbeforeunload nunca se activa.

¿Alguien puede sugerir una forma de mantener un disparador sobre is_modified?

Gracias.

Answer 1

¿Por qué no hacer que la llamada onbeforeunload una función que verifica si los valores han cambiado y, en caso afirmativo, devuelve la confirmación de "cambios no guardados"?

Answer 2

Lo siguiente funciona bien en 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.";        
  }
}   

Y si el usuario está enviando un formulario para guardar los cambios, es posible que desee agregar esto (cambie #mainForm a la ID del formulario que están enviando):

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

Answer 3

Pruebe su lógica de una manera diferente. Es decir, ponga la lógica para verificar el valor del campo de entrada en su método 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 4

Simplemente usamos Window.onbeforeunload como nuestro indicador "cambiado". Esto es lo que estamos haciendo, (usando 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 5

Tenía un requisito similar, así que se inventó el siguiente script de 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;
});

El código anterior comprueba la variable needToConfirm , si es true , mostrará un mensaje de advertencia. Cuando se cambia el valor de los elementos input , select o textarea , la variable needToConfirm se establece en true .

PD: Firefox> 4 no permite mensajes personalizados para onbeforeunload de la onbeforeunload .
Referencia: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

ACTUALIZACIÓN: si eres un fanático del rendimiento, te encantará la sugerencia de @KyleMit . Escribió una extensión de jQuery only() que se ejecutará solo una vez para cualquier 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

en IE9 puede usar declaraciones de retorno simples (re) que no mostrarán ningún cuadro de diálogo. feliz codificación ...

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

Arriba funciona para mí.