Activar y desactivar onbeforeunload de javascript

Vamos a ver un ejemplo de como activar y desactivar el evento o función onbeforeunload de javascript, este ejemplo es muy útil cuando tenemos un formulario en el que insertamos texto.

Lo que hacemos en el ejemplo es avisar al usuario de que si sale de la pagina el contenido escrito en el formulario se perderá y le damos la opción de salir o permanecer en la misma pagina:

<script>
function asegurar_cierre(valor){
	
	if (valor==1){
    window.onbeforeunload = function() {
    return 'Se perderan los cambios realizados!';
}
	}
    else if (valor==2){
	window.onbeforeunload = null;

}
}
</script>
<strong>La funci&oacute;n onbeforeunload se activa al completar el campo titulo <br>
y se desactiva al completar el campo mensaje</strong><br>
<br>

<form method="post" action="http://localhost/foros">
Titulo:<br>
<input type="text" name="titulo" value="" onChange="asegurar_cierre(1);"><br>
<br>

Mensaje:<br>
<textarea name="mensaje" onChange="asegurar_cierre(2);"></textarea><br>
<br>

<input type="submit" value="enviar" >

</form>

como podemos ver con el valor 1 activamos el evento

    window.onbeforeunload = function() {
    return 'Se perderan los cambios realizados!';

y con el valor 2 lo desactivamos

window.onbeforeunload = null;

si te a gustado el artículo compártelo en tus redes sociales!