How can I prevent the backspace key from navigating back?

Asked 2009-09-29T22:08:52.397

291

On IE I can do this with the (terribly non-standard, but working) jQuery

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

But is it possible to do in a way which works on Firefox, or in a cross-browser way for a bonus?

For the record:

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

does nothing.

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

solves the problem, but renders the backspace key unusable on the page, which is even worse than the original behaviour.

EDIT: The reason I do this is that I'm not creating a simple web page but a large application. It is incredibly annoying to lose 10 minutes of work just because you pressed backspace in the wrong place. The ratio of preventing mistakes vs. annoying users should be way above 1000/1 by preventing the backspace key from navigating back.

EDIT2: I'm not trying to prevent history navigation, just accidents.

EDIT3: @brentonstrines comment (moved here since the question is so popular): This is a long-term 'fix', but you could throw your support behind the Chromium bug to change this behavior in webkit

Edit Report

2 Answers

Using Dojo toolkit 1.7, this works in 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()});
});

answered 2013-02-26T12:17:24.760

Have you tried the very simple solution of just adding the following attribute to your read only text field:

onkeydown="return false;"

This will keep the browser from going back in history when the Backspace key is pressed in a read only text field. Maybe I am missing your true intent, but seems like this would be the simplest solution to your issue.

answered 2013-04-16T03:33:39.923

How can I prevent the backspace key from navigating back?

2 Answers

Your Answer