javascript - volver - ¿Cómo puedo evitar que la tecla de retroceso vuelva a navegar?

go back with backspace

Question

En IE puedo hacer esto con jQuery (terriblemente no estándar, pero en funcionamiento)

if ($.browser.msie)
$(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});

¿Pero es posible hacerlo de una manera que funcione en Firefox, o en una forma de navegador cruzado para obtener un bono?

Para el registro:

$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });

no hace nada.

$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });

resuelve el problema, pero deja inutilizable la tecla de retroceso en la página, que es aún peor que el comportamiento original.

EDITAR: La razón por la que hago esto es que no estoy creando una página web simple sino una aplicación grande. Es increíblemente molesto perder 10 minutos de trabajo solo porque presionaste la tecla de retroceso en el lugar equivocado. La proporción de prevención de errores frente a usuarios molestos debe estar muy por encima de 1000/1 al evitar que la tecla de retroceso retroceda.

EDIT2: No estoy tratando de evitar la navegación de la historia, solo accidentes.

EDIT3: comentario de @brentonstrines (movido aquí ya que la pregunta es muy popular): Este es un ''arreglo'' a largo plazo, pero podrías lanzar tu apoyo detrás del error de Chromium para cambiar este comportamiento en el kit web.

Answer 1

¡Deja de navegar este código funciona!

$(document).on("keydown", function (event) {
if (event.keyCode === 8) {
event.preventDefault();
}
});

Pero para no restringir campos de texto sino otros.

$(document).on("keydown", function (event) {
if (event.which === 8 && !$(event.target).is("input, textarea")) {
event.preventDefault();
}
});

Para prevenirlo por campo específico simplemente use

$(''#myOtherField'').on("keydown", function (event) {
if (event.keyCode === 8 || event.which === 8) {
event.preventDefault();
}
});

¡Refiriéndose a éste abajo!

Evita que BACKSPACE vuelva a navegar con jQuery (como la página de inicio de Google)

Answer 2

¿Ha probado la solución muy simple de simplemente agregar el siguiente atributo a su campo de texto de solo lectura:

onkeydown = "devolver falso;"

Esto evitará que el navegador regrese al historial cuando se presiona la tecla Retroceso en un campo de texto de solo lectura. Tal vez me esté perdiendo su verdadera intención, pero parece que esta sería la solución más sencilla para su problema.

Answer 3

Combinando soluciones dadas por "thetoolman" && "Biff MaGriff"

El siguiente código parece funcionar correctamente en IE 8 / Mozilla / Chrome

$(function () {
var rx = /INPUT|TEXTAREA/i;
var rxT = /RADIO|CHECKBOX|SUBMIT/i;
$(document).bind("keydown keypress", function (e) {
var preventKeyPress;
if (e.keyCode == 8) {
var d = e.srcElement || e.target;
if (rx.test(e.target.tagName)) {
var preventPressBasedOnType = false;
if (d.attributes["type"]) {
preventPressBasedOnType = rxT.test(d.attributes["type"].value);
}
preventKeyPress = d.readOnly || d.disabled || preventPressBasedOnType;
} else {preventKeyPress = true;}
} else { preventKeyPress = false; }
if (preventKeyPress) e.preventDefault();
});
});

Answer 4

Esta solución es similar a otras que se han publicado, pero utiliza una lista blanca simple que la hace fácilmente personalizable para permitir el retroceso en elementos especificados simplemente configurando el selector en la función .is ().

Lo uso en este formulario para evitar que el retroceso en las páginas se desplace hacia atrás:

$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input:not([readonly]), textarea")) {
e.preventDefault();
}
});

Answer 5

Esta solución funcionó muy bien cuando se probó.

Agregué algo de código para manejar algunos campos de entrada no etiquetados con entrada, y para integrarlos en una aplicación Oracle PL / SQL que genere un formulario de entrada para mi trabajo.

Mis dos centavos":

 if (typeof window.event != ''''undefined'''')
document.onkeydown = function() {
//////////// IE //////////////
var src = event.srcElement;
var tag = src.tagName.toUpperCase();
if (event.srcElement.tagName.toUpperCase() != "INPUT"
&& event.srcElement.tagName.toUpperCase() != "TEXTAREA"
|| src.readOnly || src.disabled
)
return (event.keyCode != 8);
if(src.type) {
var type = ("" + src.type).toUpperCase();
return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
}
}
else
document.onkeypress = function(e) {
//////////// FireFox
var src = e.target;
var tag = src.tagName.toUpperCase();
if ( src.nodeName.toUpperCase() != "INPUT" && tag != "TEXTAREA"
|| src.readOnly || src.disabled )
return (e.keyCode != 8);
if(src.type) {
var type = ("" + src.type).toUpperCase();
return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
}
}

Answer 6

Este código funciona en todos los navegadores y traga la tecla de retroceso cuando no está en un elemento de formulario, o si el elemento de formulario está deshabilitado | solo lectura. También es eficiente, lo cual es importante cuando se ejecuta en todas las teclas introducidas.

$(function(){
/*
* this swallows backspace keys on any non-input element.
* stops backspace -> back
*/
var rx = /INPUT|SELECT|TEXTAREA/i;
$(document).bind("keydown keypress", function(e){
if( e.which == 8 ){ // 8 == backspace
if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
e.preventDefault();
}
}
});
});

Answer 7

Este código resuelve el problema en todos los navegadores:

onKeydown:function(e)
{
if (e.keyCode == 8)
{
var d = e.srcElement || e.target;
if (!((d.tagName.toUpperCase() == ''BODY'') || (d.tagName.toUpperCase() == ''HTML'')))
{
doPrevent = false;
}
else
{
doPrevent = true;
}
}
else
{
doPrevent = false;
}
if (doPrevent)
{
e.preventDefault();
}
}

Answer 8

Este código resuelve el problema, al menos en IE y Firefox (no he probado ningún otro, pero le doy una posibilidad razonable de que funcione si el problema existe en otros navegadores).

// Prevent the backspace key from navigating back.
$(document).unbind(''keydown'').bind(''keydown'', function (event) {
if (event.keyCode === 8) {
var doPrevent = true;
var types = ["text", "password", "file", "search", "email", "number", "date", "color", "datetime", "datetime-local", "month", "range", "search", "tel", "time", "url", "week"];
var d = $(event.srcElement || event.target);
var disabled = d.prop("readonly") || d.prop("disabled");
if (!disabled) {
if (d[0].isContentEditable) {
doPrevent = false;
} else if (d.is("input")) {
var type = d.attr("type");
if (type) {
type = type.toLowerCase();
}
if (types.indexOf(type) > -1) {
doPrevent = false;
}
} else if (d.is("textarea")) {
doPrevent = false;
}
}
if (doPrevent) {
event.preventDefault();
return false;
}
}
});

Answer 9

La mayoría de las respuestas están en jQuery. Puede hacerlo perfectamente en Javascript puro, simple y sin necesidad de biblioteca. This artículo fue un buen punto de partida para mí, pero como keyIdentifier está en desuso, quería que este código fuera más seguro, así que agregué || e.keyCode == 8 a la declaración if. Además, el código no funcionaba bien en Firefox, así que agregué return false; y ahora funciona perfectamente bien. Aquí está:

<script type="text/javascript">
window.addEventListener(''keydown'',function(e){if(e.keyIdentifier==''U+0008''||e.keyIdentifier==''Backspace''||e.keyCode==8){if(e.target==document.body){e.preventDefault();return false;}}},true);
</script>

Este código funciona muy bien porque,

1. Está en javascript puro (no se requiere biblioteca).
2. No solo verifica la tecla presionada, sino que también confirma si la acción es realmente una acción "atrás" del navegador.
3. Junto con lo anterior, el usuario puede escribir y eliminar el texto de los cuadros de texto de entrada en la página web sin ningún problema mientras evita la acción del botón Atrás.
4. Es corto, limpio, rápido y directo al grano.

Puede agregar console.log (e); para sus propósitos de prueba, y presione F12 en Chrome, vaya a la pestaña "consola" y presione "retroceso" en la página y mire dentro de ella para ver qué valores se devuelven, luego puede apuntar a todos esos parámetros para mejorar aún más el código arriba para satisfacer sus necesidades.

Answer 10

Las otras respuestas aquí han establecido que esto no se puede hacer sin los elementos de la lista blanca en los que se permite Retroceso. Esta solución no es ideal porque la lista blanca no es tan sencilla como las simples entradas de texto y texto / contraseña, pero se encuentra repetidamente como incompleta y necesita ser actualizada.

Sin embargo, dado que el propósito de suprimir la funcionalidad de retroceso es simplemente evitar que los usuarios pierdan datos accidentalmente, la solución antes de la descarga es buena porque la ventana emergente modal es sorprendente: las ventanas emergentes modales son malas cuando se activan como parte de un flujo de trabajo estándar. porque el usuario se acostumbra a despedirlos sin leerlos, y son molestos. En este caso, la ventana emergente modal solo aparecería como una alternativa a una acción rara y sorprendente, y por lo tanto es aceptable.

El problema es que no debe aparecer un modo onbeforeunload cuando el usuario navega fuera de la página (por ejemplo, al hacer clic en un enlace o al enviar un formulario), y no queremos comenzar a incluir listas negras o negras en condiciones específicas antes de descargar.

La combinación ideal de compensaciones para una solución generalizada es la siguiente: realizar un seguimiento de si se presiona la tecla de retroceso, y solo aparece el modo de carga antes de la descarga si es así. En otras palabras:

function confirmBackspaceNavigations () {
// http://.com/a/22949859/2407309
var backspaceIsPressed = false
$(document).keydown(function(event){
if (event.which == 8) {
backspaceIsPressed = true
}
})
$(document).keyup(function(event){
if (event.which == 8) {
backspaceIsPressed = false
}
})
$(window).on(''beforeunload'', function(){
if (backspaceIsPressed) {
backspaceIsPressed = false
return "Are you sure you want to leave this page?"
}
})
} // confirmBackspaceNavigations

Esto ha sido probado para funcionar en IE7 +, FireFox, Chrome, Safari y Opera. Simplemente coloque esta función en su archivo global.js y llámela desde cualquier página donde no desee que los usuarios pierdan accidentalmente sus datos.

Tenga en cuenta que esto no se activará en eventos de cambio de hash, sin embargo, en ese contexto, puede utilizar otras técnicas para evitar que los usuarios pierdan accidentalmente sus datos.

Answer 11

Me costó encontrar una respuesta que no fuera JQUERY. Gracias a Stas por ponerme en la pista.

Chrome: si no necesita compatibilidad con varios navegadores, puede usar una lista negra, en lugar de listas blancas. Esta versión de JS puro funciona en Chrome, pero no en IE. No estoy seguro acerca de FF.

En Chrome (ver. 36, mediados de 2014), las pulsaciones de teclas que no se encuentran en una entrada o elemento contenteditable parecen estar dirigidas a <BODY> . Esto hace posible utilizar una lista negra, que prefiero a la lista blanca. IE utiliza el último destino de clic, por lo que podría ser un div o cualquier otra cosa. Eso hace que esto sea inútil en IE.

window.onkeydown = function(event) {
if (event.keyCode == 8) {
//alert(event.target.tagName); //if you want to see how chrome handles keypresses not on an editable element
if (event.target.tagName == ''BODY'') {
//alert("Prevented Navigation");
event.preventDefault();
}
}
}

Navegador cruzado: para javascript puro, encontré que la respuesta de Stas es la mejor. Agregar una verificación de condición más para contenteditable lo hizo funcionar para mí *:

document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}
function stopDefaultBackspaceBehaviour(event) {
var event = event || window.event;
if (event.keyCode == 8) {
var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
var d = event.srcElement || event.target;
var regex = new RegExp(d.tagName.toUpperCase());
if (d.contentEditable != ''true'') { //it''s not REALLY true, checking the boolean value (!== true) always passes, so we can use != ''true'' rather than !== true/
if (regex.test(elements)) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
}
}
}

* Tenga en cuenta que IEs [edit: y Spartan / TechPreview] tienen una "característica" que hace que los elementos relacionados con la tabla no sean editables . Si haces clic en uno de esos y luego ENTRAS la tecla de retroceso, se desplazará hacia atrás. Si no tiene <td> editables, esto no es un problema.

Answer 12

No estoy seguro de por qué nadie acaba de responder a esto; parece una pregunta técnica perfectamente razonable para preguntar si es posible.

No, no creo que haya una forma de navegador para desactivar el botón de retroceso. Sé que no está habilitado por defecto en FF en estos días sin embargo.

Answer 13

Para elaborar un poco sobre la excelente respuesta de @ erikkallen, aquí hay una función que permite todos los tipos de entrada basados ​​en teclado, incluidos los introducidos en HTML5 :

$(document).unbind(''keydown'').bind(''keydown'', function (event) {
var doPrevent = false;
var INPUTTYPES = [
"text", "password", "file", "date", "datetime", "datetime-local",
"month", "week", "time", "email", "number", "range", "search", "tel",
"url"];
var TEXTRE = new RegExp("^" + INPUTTYPES.join("|") + "$", "i");
if (event.keyCode === 8) {
var d = event.srcElement || event.target;
if ((d.tagName.toUpperCase() === ''INPUT'' && d.type.match(TEXTRE)) ||
d.tagName.toUpperCase() === ''TEXTAREA'') {
doPrevent = d.readOnly || d.disabled;
} else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
}
});

Answer 14

Respuesta erikkallen modificada:

$(document).unbind(''keydown'').bind(''keydown'', function (event) {
var doPrevent = false, elem;
if (event.keyCode === 8) {
elem = event.srcElement || event.target;
if( $(elem).is('':input'') ) {
doPrevent = elem.readOnly || elem.disabled;
} else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
return false;
}
});

Answer 15

Según los comentarios, parece que desea evitar que las personas pierdan información en los formularios, si presionan la tecla de retroceso para eliminar pero el campo no está enfocado.

En cuyo caso, desea ver el controlador de eventos onunload . lo usa: si intentas dejar una página cuando empiezas a escribir una respuesta, aparece una advertencia.

Answer 16

Tuve algunos problemas con la solución aceptada y el complemento Select2.js; No pude eliminar los caracteres en el cuadro editable porque se estaba impidiendo la acción de eliminar. Esta fue mi solución:

//Prevent backwards navigation when trying to delete disabled text.
$(document).unbind(''keydown'').bind(''keydown'', function (event) {
if (event.keyCode === 8) {
var doPrevent = false,
d = event.srcElement || event.target,
tagName = d.tagName.toUpperCase(),
type = (d.type ? d.type.toUpperCase() : ""),
isEditable = d.contentEditable,
isReadOnly = d.readOnly,
isDisabled = d.disabled;
if (( tagName === ''INPUT'' && (type === ''TEXT'' || type === ''PASSWORD''))
|| tagName === ''PASSWORD''
|| tagName === ''TEXTAREA'') {
doPrevent = isReadOnly || isDisabled;
}
else if(tagName === ''SPAN''){
doPrevent = !isEditable;
}
else {
doPrevent = true;
}
}
if (doPrevent) {
event.preventDefault();
}
});

Select2 crea un intervalo con un atributo de "contentEditable" que se establece en verdadero para el cuadro combinado editable en él. Agregué un código para tener en cuenta el tagName de los spans y el atributo diferente. Esto solucionó todos mis problemas.

Edición: Si no está utilizando el complemento combobox Select2 para jQuery, es posible que no necesite esta solución y que la solución aceptada sea mejor.

Answer 17

Una solución más elegante / concisa:

$(document).on(''keydown'',function(e){
var $target = $(e.target||e.srcElement);
if(e.keyCode == 8 && !$target.is(''input,[contenteditable="true"],textarea''))
{
e.preventDefault();
}
})

Answer 18

Una solución mucho más limpia.

$(document).on(''keydown'', function (e) {
var key = e == null ? event.keyCode : e.keyCode;
if(key == 8 && $(document.activeElement.is('':not(:input)''))) //select, textarea
e.preventDefault();
});

Alternativamente, solo puedes comprobar si

$(document.activeElement).is(''body'')

Answer 19

Usando el kit de herramientas Dojo 1.7, esto funciona en IE 8:

require(["dojo/on", "dojo/keys", "dojo/domReady!"],
function(on, keys) {
on(document.body,"keydown",function(evt){if(evt.keyCode == keys.BACKSPACE)evt.preventDefault()});
});

Answer 20

Versión javascript pura, que funciona en todos los navegadores:

document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}
function stopDefaultBackspaceBehaviour(event) {
var event = event || window.event;
if (event.keyCode == 8) {
var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
var d = event.srcElement || event.target;
var regex = new RegExp(d.tagName.toUpperCase());
if (regex.test(elements)) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
}
}

Por supuesto, puede usar "ENTRADA, TEXTAREA" y usar "if (! Regex.test (elements))" entonces. El primero funcionó bien para mí.

Answer 21

Sitepoint: Desactivar volver para Javascript

event.stopPropagation()y event.preventDefault()no hacer nada en IE. Sin embargo, tuve que enviar la devolución event.keyCode == 11(solo elegí algo) en lugar de solo decir "if not = 8, run the event"para que funcione. event.returnValue = falsetambien funciona

Answer 22

¿Actuación?

Estaba preocupado por el rendimiento e hice un violín: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

var stresstest = function(e, method, index){...

He analizado los métodos más prometedores que he encontrado en este hilo. Resulta que todos fueron muy rápidos y lo más probable es que no causen un problema en términos de "lentitud" al escribir. El método más lento que observé fue de aproximadamente 125 ms para 10.000 llamadas en IE8. Lo que es 0.0125ms por carrera.

Descubrí que los métodos publicados por Codenepal y Robin Maben son los más rápidos ~ 0.001 ms (IE8) pero ten cuidado con las diferentes semánticas.

Quizás esto sea un alivio para alguien que introduce este tipo de funcionalidad en su código.

Answer 23

JavaScript - jQuery forma:

$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target).is("input, textarea")) {
e.preventDefault();
}
});

Javascript - la forma nativa, que funciona para mí:

<script type="text/javascript">
//on backspace down + optional callback
function onBackspace(e, callback){
var key;
if(typeof e.keyIdentifier !== "undefined"){
key = e.keyIdentifier;
}else if(typeof e.keyCode !== "undefined"){
key = e.keyCode;
}
if (key === ''U+0008'' ||
key === ''Backspace'' ||
key === 8) {
if(typeof callback === "function"){
callback();
}
return true;
}
return false;
}
//event listener
window.addEventListener(''keydown'', function (e) {
switch(e.target.tagName.toLowerCase()){
case "input":
case "textarea":
break;
case "body":
onBackspace(e,function(){
e.preventDefault();
});
break;
}
}, true);
</script>

Answer 24

La forma más sencilla de evitar la navegación al presionar retroceso.

$(document).keydown(function () {
if (event.keyCode == 8) {
if (event.target.nodeName == ''BODY'') {
event.preventDefault();
}
}
});

Answer 25

Modificación de la Respuesta de erikkallen para abordar diferentes tipos de entrada

Descubrí que un usuario emprendedor podría presionar la tecla de retroceso en una casilla de verificación o un botón de radio en un vano intento de borrarlo y en su lugar, navegarían hacia atrás y perderían toda su información.

Este cambio debe abordar ese problema.

Nueva edición para direccionar contenido editable divs

 //Prevents backspace except in the case of textareas and text inputs to prevent user navigation.
$(document).keydown(function (e) {
var preventKeyPress;
if (e.keyCode == 8) {
var d = e.srcElement || e.target;
switch (d.tagName.toUpperCase()) {
case ''TEXTAREA'':
preventKeyPress = d.readOnly || d.disabled;
break;
case ''INPUT'':
preventKeyPress = d.readOnly || d.disabled ||
(d.attributes["type"] && $.inArray(d.attributes["type"].value.toLowerCase(), ["radio", "checkbox", "submit", "button"]) >= 0);
break;
case ''DIV'':
preventKeyPress = d.readOnly || d.disabled || !(d.attributes["contentEditable"] && d.attributes["contentEditable"].value == "true");
break;
default:
preventKeyPress = true;
break;
}
}
else
preventKeyPress = false;
if (preventKeyPress)
e.preventDefault();
});

Ejemplo
Para probar hacer 2 archivos.

starthere.htm - abre esto primero para que tengas un lugar para volver a

<a href="./test.htm">Navigate to here to test</a>

test.htm: navegará hacia atrás cuando se presione la tecla de retroceso, mientras que la casilla de verificación o el envío tienen enfoque (logrado mediante tabulación). Reemplazar con mi código para arreglar.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).keydown(function(e) {
var doPrevent;
if (e.keyCode == 8) {
var d = e.srcElement || e.target;
if (d.tagName.toUpperCase() == ''INPUT'' || d.tagName.toUpperCase() == ''TEXTAREA'') {
doPrevent = d.readOnly || d.disabled;
}
else
doPrevent = true;
}
else
doPrevent = false;
if (doPrevent)
e.preventDefault();
});
</script>
</head>
<body>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
</body>
</html>

Answer 26

Otro método utilizando jQuery.

 <script type="text/javascript">
//set this variable according to the need within the page
var BACKSPACE_NAV_DISABLED = true;
function fnPreventBackspace(event){if (BACKSPACE_NAV_DISABLED && event.keyCode == 8) {return false;}}
function fnPreventBackspacePropagation(event){if(BACKSPACE_NAV_DISABLED && event.keyCode == 8){event.stopPropagation();}return true;}
$(document).ready(function(){
if(BACKSPACE_NAV_DISABLED){
//for IE use keydown, for Mozilla keypress
//as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
$(document).keypress(fnPreventBackspace);
$(document).keydown(fnPreventBackspace);
//Allow Backspace is the following controls
var jCtrl = null;
jCtrl = $(''input[type="text"]'');
jCtrl.keypress(fnPreventBackspacePropagation);
jCtrl.keydown(fnPreventBackspacePropagation);
jCtrl = $(''input[type="password"]'');
jCtrl.keypress(fnPreventBackspacePropagation);
jCtrl.keydown(fnPreventBackspacePropagation);
jCtrl = $(''textarea'');
jCtrl.keypress(fnPreventBackspacePropagation);
jCtrl.keydown(fnPreventBackspacePropagation);
//disable backspace for readonly and disabled
jCtrl = $(''input[type="text"][readonly="readonly"]'')
jCtrl.keypress(fnPreventBackspace);
jCtrl.keydown(fnPreventBackspace);
jCtrl = $(''input[type="text"][disabled="disabled"]'')
jCtrl.keypress(fnPreventBackspace);
jCtrl.keydown(fnPreventBackspace);
}
});
</script>

Answer 27

Creé un proyecto NPM con una versión limpia de la actualmente aceptada (de erikkallen)

https://github.com/slorber/backspace-disabler

Utiliza básicamente los mismos principios pero:

• Sin dependencia
• Soporte para contenteditable
• Base de código más legible / mantenible
• Será soportado ya que será utilizado en producción por mi empresa.
• Licencia MIT

var Backspace = 8;
// See http://.com/questions/12949590/how-to-detach-event-in-ie-6-7-8-9-using-javascript
function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
function removeHandler(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
// Test wether or not the given node is an active contenteditable,
// or is inside an active contenteditable
function isInActiveContentEditable(node) {
while (node) {
if ( node.getAttribute && node.getAttribute("contenteditable") === "true" ) {
return true;
}
node = node.parentNode;
}
return false;
}
var ValidInputTypes = [''TEXT'',''PASSWORD'',''FILE'',''EMAIL'',''SEARCH'',''DATE''];
function isActiveFormItem(node) {
var tagName = node.tagName.toUpperCase();
var isInput = ( tagName === "INPUT" && ValidInputTypes.indexOf(node.type.toUpperCase()) >= 0 );
var isTextarea = ( tagName === "TEXTAREA" );
if ( isInput || isTextarea ) {
var isDisabled = node.readOnly || node.disabled;
return !isDisabled;
}
else if ( isInActiveContentEditable(node) ) {
return true;
}
else {
return false;
}
}
// See http://.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back
function disabler(event) {
if (event.keyCode === Backspace) {
var node = event.srcElement || event.target;
// We don''t want to disable the ability to delete content in form inputs and contenteditables
if ( isActiveFormItem(node) ) {
// Do nothing
}
// But in any other cases we prevent the default behavior that triggers a browser backward navigation
else {
event.preventDefault();
}
}
}
/**
* By default the browser issues a back nav when the focus is not on a form input / textarea
* But users often press back without focus, and they loose all their form data :(
*
* Use this if you want the backspace to never trigger a browser back
*/
exports.disable = function(el) {
addHandler(el || document,"keydown",disabler);
};
/**
* Reenable the browser backs
*/
exports.enable = function(el) {
removeHandler(el || document,"keydown",disabler);
};

Answer 28

Aquí está mi reescritura de la respuesta más votada. Intenté verificar element.value! == undefined (ya que algunos elementos como puede no tener un atributo html pero pueden tener una propiedad de valor de javascript en algún lugar de la cadena de prototipos), sin embargo, no funcionó muy bien y tenía muchos casos de borde. Parece que no hay una buena manera de hacer esto para el futuro, por lo que una lista blanca parece la mejor opción.

Esto registra el elemento al final de la fase de burbuja de evento, por lo que si desea manejar el retroceso de cualquier forma personalizada, puede hacerlo en otros controladores.

Esto también verifica la instancia de HTMLTextAreElement ya que uno podría tener teóricamente un componente web que se hereda de eso.

Esto no verifica el contenido editable (se combina con otras respuestas).

https://jsfiddle.net/af2cfjc5/15/

var _INPUTTYPE_WHITELIST = [''text'', ''password'', ''search'', ''email'', ''number'', ''date''];
function backspaceWouldBeOkay(elem) {
// returns true if backspace is captured by the element
var isFrozen = elem.readOnly || elem.disabled;
if (isFrozen) // a frozen field has no default which would shadow the shitty one
return false;
else {
var tagName = elem.tagName.toLowerCase();
if (elem instanceof HTMLTextAreaElement) // allow textareas
return true;
if (tagName==''input'') { // allow only whitelisted input types
var inputType = elem.type.toLowerCase();
if (_INPUTTYPE_WHITELIST.includes(inputType))
return true;
}
return false; // everything else is bad
}
}
document.body.addEventListener(''keydown'', ev => {
if (ev.keyCode==8 && !backspaceWouldBeOkay(ev.target)) {
//console.log(''preventing backspace navigation'');
ev.preventDefault();
}
}, true); // end of event bubble phase

Answer 29

He estado usando esto en mi código desde hace algún tiempo. Escribo exámenes en línea para los estudiantes y encontré el problema cuando los estudiantes presionaban la tecla de retroceso durante el examen y los llevaría a la pantalla de inicio de sesión. ¡Frustrante! Funciona en FF seguro.

document.onkeypress = Backspace;
function Backspace(event) {
if (event.keyCode == 8) {
if (document.activeElement.tagName == "INPUT") {
return true;
} else {
return false;
}
}
}

Answer 30

 document.onkeydown = function (e) {
e.stopPropagation();
if ((e.keyCode==8 || e.keyCode==13) &&
(e.target.tagName != "TEXTAREA") &&
(e.target.tagName != "INPUT")) {
return false;
}
};