Interceptando la salida accidental del usuario

El problema (y lo detecte gracias a mi madre :P), es, ¿y que si el usuario presiona F5 cuando va a la mitad de un enorme formulario? No es culpa del usuario, pero incluso cuando me pasa a mi, me da tanto coraje perder lo que había llenado por tan tremenda tontería, que se me quitan las ganas de volverlo a intentar.

No queda opción, hay que interceptar cuando el usuario presiona ciertas teclas en ciertos lugares. Por suerte, fue muy fácil hacerlo. Para Mootools el script sería así:

window.addEvent('domready',function(){
 
	if($$('div.no-f5').length > 0)
	{
		document.addEvent('keydown',function(event){
 
			var tag = event.target.tagName.toLowerCase();
 
			if(event.key=='f5' || (event.key=='backspace' && tag!='input' && tag!='textarea'))
				event.stop();
		});
	}
});

Revisamos si existe un div.no-f5, que no es más que una clase bandera, para saber si en esa pantalla necesitaré del script. Si procede, creo el evento keydown para el documento. Cuando el evento suceda, comprobamos a que elemento se está apuntando, pues no queremos interceptar el backspace cuando el usuario esta escribiendo en algún campo de texto, pero si en cualquier otro caso pues lo regresaría a la pantalla anterior. La tecla F5 la interceptamos en todo momento.

Al mismo tiempo, descubrí (todo por no leer en su momento), que Mootols no extiende el objeto event.target con $, por razones de rendimiento. Así que si los chicos de Moo tuvieron buenas razones, decidí no extenderlo aunque hacer un $(event.target).get('tag') era muy tentador… pero hacerlo con Javascript nativo es muy fácil y cross browser.

Tanto el problema como la solución son detalles muy simples y normalmente subestimadas, pero seguro salvas a algún usuario de que se arranque el cabello mientras llenaba un enorme formulario.

Escribe un comentario

*
*