javascript - that - Evite que BACKSPACE vuelva a navegar con jQuery(como la página de inicio de Google)

to view this video please enable javascript and consider upgrading to a web browser that

Question

Observe en la página de inicio de Google, sin centrarse en ningún elemento, presionar RETROCESO pondrá el foco en la barra de herramientas de búsqueda en lugar de navegar hacia atrás.

¿Cómo puedo lograr esto?

Sigo teniendo problemas con los usuarios de mi aplicación. No tienen foco en ningún elemento y presionan RETROCESO, lo que los saca de la aplicación.

Answer 1

Aquí hay una solución simple probada en IE, Chrome y Firefox.

$(document).on("keydown", function (event) {
// Chrome & Firefox || Internet Explorer
if (document.activeElement === document.body || document.activeElement === document.body.parentElement) {
    // SPACE (32) o BACKSPACE (8)
    if (event.keyCode === 32 || event.keyCode === 8) {
        event.preventDefault();
    }
}});

Answer 2

Esto es antiguo, pero estas respuestas aún te permitirán retroceder y navegar cuando te centres en un botón de opción. También querrá filtrar el tipo de entrada. Acredite todas las respuestas anteriores para esto:

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

Answer 3

He probado muchos de los fragmentos de código en Internet sin un resultado satisfactorio. Las nuevas versiones de navegador de IE (IE11) y Crome rompieron mi antigua solución, pero esto es lo que funciona para mí con IE11 + Crome + Firefox. El código evita el retroceso y el usuario no pierde nada de lo que ha introducido en un campo de texto:

window.addEventListener(''keydown'', function (e) {
    if (e.keyIdentifier === ''U+0008'' || e.keyIdentifier === ''Backspace'' || e.keyCode === ''8'' || document.activeElement !== ''text'') {
        if (e.target === document.body) {
            e.preventDefault();
        }
    }
}, true);

Answer 4

La forma en que google hace esto es genial. Cuando presionas el retroceso, enfocan el campo de texto. Evitando que los usuarios vuelvan a navegar!

Puedes intentar lo mismo:

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<input id="target" type="text" />

<script type="text/javascript">
$(document).keydown(function(e) { if (e.keyCode == 8) $(''#target'').focus(); });
</script>

demo: http://jsfiddle.net/epinapala/TxG5p/

Answer 5

Manejo de cuadros de texto de solo lectura también

$(document).keydown(function (e) {
        var activeInput = $(document.activeElement).is("input[type=text]:not([readonly]):focus, textarea:focus");
        if (e.keyCode === 8 && !activeInput) {
            return false;
        };
    });

Answer 6

Me gusta mucho la respuesta de Andrew Whitaker. Sin embargo, seguirá navegando hacia atrás cuando se enfoca en un campo de entrada de sólo lectura, radio o casilla de verificación y no permitirá el retroceso en los elementos de contentEditable, por lo que he agregado una ligera modificación. El crédito va para Andrew Whitaker.

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

Por el momento, parece ser necesario tener cada variación [contentEditable] que está en el HTML desde [contentEditable]! = [ContentEditable = true].

Answer 7

Para Internet Explorer, esto funcionó para mí:

window.addEventListener (''keydown'', función (e) {

    if (e.keyCode === 8) {
        if (e.target === document.body) {
        e.preventDefault();
        }
    }
}, true);

Answer 8

Para detenerse de navegar simplemente ¡este código funciona!

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

Pero eso también sucederá para los campos de entrada tipo text / textarea. Entonces, para restringirlo para esos campos, puede usar

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

En mi caso, cuando tenía un campo de texto para el calendario y siempre que hacía clic en ese calendario, seleccionaba la fecha y presiono la tecla de retroceso, volvía a la página anterior. Para prevenirlo solo para ese campo, simplemente utilicé

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

Pensé mencionar para ayudar a algunos ;-)

Answer 9

Me gustaría vincular un controlador de eventos a la keydown de keydown y evitar la acción predeterminada de ese evento si se trata de la tecla de retroceso fuera de un área de textarea o input :

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