Sin vuelta atrás

Hace un tiempo me encontré con el problema de que si un usuario está rellenando un formulario y el foco está situado sobre un control de tipo solo lectura (readonly) o sobre el botón de envío (submit), y dicho usuario pulsa el botón de borrar (delete), el navegador se comportará como si se hubiese dado a la flecha de atrás.

Portada de la pelicula No Way Back

Intentando buscar una solución me di cuenta de que realmente no hay demasiada información sobre cómo resolver este problema.

Así que, aquí comparto a modo de snippet la solución que encontré. Sólo tendremos que colocar el siguiente código javascript antes de la etiqueta de cierre del body.

(function(d){
  if(d.addEventListener) {
    d.addEventListener('keydown',noPageBack,false);
  } else {
    d.attachEvent("onkeydown", noPageBack);
  }
  function noPageBack(e) {
    var codigoTecla = (e.which) ? e.which : e.keyCode;
    var elemento = (e.target) ? e.target : e.srcElement;
    if( codigoTecla === 8 && (elemento.readOnly || elemento.type === 'submit') ) {
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
  }
})(document);​

Lo primero que hacemos es incluir el código en un closure para no interferir con el resto del javascript de la aplicación, llevándonos el elemento document al interior de nuestro closure.

(function(d){
  //Aquí dentro d es document
})(document);​

Le decimos al document que cuando reciba el evento keydown ejecute la función noPageBack. Lo hacemos teniendo en cuenta que podemos encontrarnos navegadores viejos sueltos por ahí.

if(d.addEventListener) {
    d.addEventListener('keydown',noPageBack,false);
} else {
    d.attachEvent("onkeydown", noPageBack); //para IE viejos
}

Y por último, la función. Como se puede ver, se ha tenido mucho en cuenta navegadores IE viejos y es que en el caso concreto, había que tener en cuenta incluso Internet Explorer 7.

function noPageBack(e) {
    //Se recoge el codigo de tecla que ha emitido el evento keydown. e.keyCode es para IE viejos
    var codigoTecla = (e.which) ? e.which : e.keyCode;
    
    //Se recoge sobre que elemento se ha producido el evento. e.srcElement para IE viejos
    var elemento = (e.target) ? e.target : e.srcElement;

    //El 8 es el codigo de la tecla delete, y despues miramos si el elemento es de tipo readonly o submit
    if( codigoTecla === 8 && (elemento.readOnly || elemento.type === 'submit') ) {
        //e.returnValue = false para IE viejos
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
}

Espero que sea ayuda.

Sin vuelta atrás

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s