Prevenir la pérdida de datos de formulario navegando fuera de la página

Question

Estoy creando una cuadrícula de datos con cientos de filas que contienen una casilla de verificación en cada fila para que el usuario pueda seleccionar un elemento de la cuadrícula.

Ahora el usuario puede pasar una gran cantidad de tiempo filtrando/buscando a través de la cuadrícula y marcando las casillas requeridas, solo para presionar accidentalmente la tecla de retroceso en su teclado o hacer clic en un hipervínculo en la página. Y perderían todas sus selecciones de casillas de verificación.

Así que quiero presentar algunas funcionalidades por las cuales si al menos una casilla de verificación ha sido marcada, entonces si el usuario involuntariamente realiza una acción que los alejaría de la página, se muestra un mensaje de confirmación de JavaScript para notificar al usuario esta.

Las casillas de verificación pertenecerían todas al mismo grupo, por ejemplo se llamarían "productos".

¿Es posible hacer esto en absoluto?

Answer 1

Hay un evento beforeunload que se produce cuando el usuario navega fuera: http://jsfiddle.net/FprNV/1/.

Al devolver una cadena allí, aparece un mensaje que aparece con dos botones (permanecer/navegar); la implementación exacta de este diálogo es diferente en todos los navegadores.

$(window).bind('beforeunload', function() { 
    var checkboxcount = $("input:checkbox:checked").length; 
    if(checkboxcount > 0) { 
     return 'Are you sure?'; 
    } 
});