Javascript: ¿Cómo puedo bloquear el carácter de retroceso?

Question

No deseo que el usuario de mi sitio web utilice el retroceso para ir a la página anterior,
pero aún así quiero mantener el uso del retroceso,
como borrar una escritura errónea.
¿Cómo puedo hacer?

Muchas gracias.

Answer 1

Debería poder adjuntar un OnKeydown/Up/Press listener a su ventana. En esta función, observe el código clave que se presionó y el objetivo del evento. Si el código clave es retroceso y el objetivo NO es un cuadro de entrada o un área de texto, evite el evento.

Answer 2

Puede usar la propiedad "onbeforeunload" en la etiqueta de cuerpo para indicarle al usuario que está saliendo de la página.

Answer 3

Como han mencionado otros, existen métodos en los que puede supervisar los eventos clave de retroceso y realizar diferentes acciones.

recomiendo contra agarrar la tecla de retroceso para un par de razones:

1) Es simplemente irritante e irritó a los usuarios es probable que no regrese a la página.

2) El retroceso no es el único método para volver a la página anterior. Hay otras combinaciones de teclas que pueden lograr lo mismo, así como el obvio "botón de retroceso".

No lo haga, pero si debe hacerlo, use onbeforeunload() en lugar de atrapar las pulsaciones de teclas específicas del navegador.

Answer 4

Simplemente puede utilizar los siguientes fragmentos de código para bloquear el retroceso cuando el cursor está en texarea, texto y controles de contraseña.

function onKeyDown() 
{  
    if((event.altKey) || ((event.keyCode == 8) && 
     (event.srcElement.type != "text" && 
     event.srcElement.type != "textarea" && 
     event.srcElement.type != "password")) || 
     ((event.ctrlKey) && ((event.keyCode == 78) || (event.keyCode == 82))) || (event.keyCode == 116)) { 
    event.keyCode = 0; 
    event.returnValue = false;} 
} 

llamar a esta función del cuerpo de la etiqueta onkeydown caso

Answer 5

Solución: Coloque el código siguiente hacia el final de todas las páginas que contienen formas:

<!-- Block the Backspace and Enter keys in forms, outside of input texts and textareas --> 
<script type="text/javascript"> 
    function blockBackspaceAndEnter(e) { 
     if (!e) { // IE reports window.event instead of the argument 
      e = window.event; 
     } 
     var keycode; 
     if (document.all) { 
      // IE 
      keycode = e.keyCode; 
     } else { 
      // Not IE 
      keycode = e.which; 
     } 
     // Enter is only allowed in textareas, and Backspace is only allowed in textarea and input text and password 
     if ((keycode == 8 
       && e.srcElement.type != "text" 
       && e.srcElement.type != "textarea" 
       && e.srcElement.type != "password") 
       || (keycode == 13 && e.srcElement.type != "textarea")) { 
      e.keyCode = 0; 
      if (document.all) { 
       // IE 
       event.returnValue = false; 
      } else { 
       // Non IE 
       Event.stop(e); 
      } 
     } 
    } 
    for (var i = 0; i < document.forms.length; i++) { 
     document.forms[i].onkeydown = blockBackspaceAndEnter; 
    } 
</script> 

que tengo los siguientes comentarios sobre lo que otras personas respondieron aquí antes:

Alguien dijo:

"Por favor, no. Usuarios como backspace-to-go-back; . Va hacia atrás se uno de los navegadores más vital características y su ruptura es intolerablemente grosero"

Mi respuesta a él es:

Sí, por lo general la gente hace uso de la tecla Atrás para volver , PERO NO en las páginas con FORMULARIOS. Por otro lado, es muy fácil para las personas a accidentalmente haga clic cerca o fuera de un texto de entrada o área de texto, y luego presione el botón de retroceso, por lo que se pierden todas sus ediciones, como otra persona también notó:

"los usuarios no están en un cuadro de texto y pulsa la tecla de retroceso , perdiendo por completo toda la información la forma que acaba de entrar. normalmente no sería un problema, pero para nosotros, estamos llenando un montón de texto en formularios de estado largos ".

La misma comportamiento no deseado también puede decirse de la tecla Enter para enviar el formulario, que por lo general es sólo deseable (o nunca) para las pequeñas formas con algunos campos, pero no para formularios con muchos campos y cuadros de selección y cuadros de entrada y áreas de texto, en los que la mayoría de las veces NO QUIERE que se envíe el formulario cuando presiona Entrar.

Por eso sugiero el código anterior, que se aplica a todas las formas <FORM> la función sugerida por webster, pero sin las verificaciones de ALT, que no creo que sea útil y sin las verificaciones de CTRL + N y CTRL + R y CTRL + F5, que no queremos bloquear, porque cuando se utilizan NO son accidentales.

Desafortunadamente, el código de arriba no funciona en Firefox cuando tiene DIVs y TABLE dentro de su FORMULARIO! Esto se debe a que el evento de pulsación parece no propagarse al formulario que lo contiene, y en su lugar se aplica el comportamiento predeterminado (¡NO DESEADO!) Para las teclas Retroceso e Intro. Todavía no he podido encontrar una solución para este ...

Answer 6

Filme Noi Cinema tiene la respuesta correcta, pero el código de ejemplo está un poco anticuado. Solo necesitaba esta solución, así que pensé en publicar el código que utilicé.

//I use the standard DOM method for accessing the body tag, because the 
//non-standard HTML DOM shortcuts are not stable. The correct behavior is 
//dynamically attached to the entire body using the onkeypress event, which 
//is the most stable event to target cross browser. 
document.getElementsByTagName("body")[0].onkeypress = function (event) { 
    var a = event || window.event, //get event cross browser 
     b = a.target || a.srcElement; //get source cross browser 

    //the only thing that matters is the backspace key 
    if (a.keyCode === 8) { 

     //if you are a textarea or input type text or password then fail 
     if (b.nodeName === "textarea" || (b.nodeName === "input" && (b.getAttribute("type") === "text" || b.getAttribute("type") === "password"))) { 
      return true; 
     } else { 

      //backspace is disabled for everything else 
      return false; 
     } 
    } 
}; 

Este código debe ejecutarse antes de que el usuario comience a utilizar la página. Hay varias maneras de hacerlo:

1. Puede poner el código anterior en cualquier función que ya esté conectada al evento onload.
2. Puede ajustar el código anterior relacionado con el evento de carga de la página.
3. Puede poner el código anterior en una función autoejecutable.

Ejemplos:

//self executing function 
(function() { 
    the solution code here 
}()); 

//wrapper to onload event 
document.getElementsByTagName("body")[0].onload = function() { 
    the solution code here 
}; 

estoy agregando este código para Pretty Diff si desea ver un ejemplo en acción.

Answer 7

Finalmente encontré uno que funciona en todos los navegadores.

Es por Hazem Saleh Su dirección es: http://www.technicaladvices.com/2012/07/16/preventing-backspace-from-navigating-back-in-all-the-browsers/

/*Starts here:*/ 

    document.onkeydown = function (event) { 

    if (!event) { /* This will happen in IE */ 
     event = window.event; 
    } 

    var keyCode = event.keyCode; 

    if (keyCode == 8 && 
     ((event.target || event.srcElement).tagName != "TEXTAREA") && 
     ((event.target || event.srcElement).tagName != "INPUT")) { 

     if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) { 
      event.stopPropagation(); 
     } else { 
      alert("prevented"); 
      event.returnValue = false; 
     } 

     return false; 
    } 
    }; 
/*Ends Here*/