How can I prevent the browser's default history back action for the backspace button with JavaScript?

Question

Is there a way to prevent the default action from occurring when the user presses backspace in a browser?

I don't need to prevent the user from leaving, just from having the default backspace action. I need the backspace to do something different (it's a game).

I tried without success:

window.addEventListener('keydown', function(e) {
    if (e.keyCode === Game.Key.BACK_SPACE)
    {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
}, false);

If I put an alert inside the if, the alert will be shown for backspace key press. So, the keyCode is correct.

This has to work in Opera 10.6, Firefox 4, Chrome 6, Internet Explorer 9 and Safari 5.

Related Question: [SO: How can I prevent the backspace key from navigating back?](http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back) — reto, Jul 31 '13 at 07:06

Tim Down · Accepted Answer · 2010-10-03T16:56:36.627

13

You don't need return false or e.stopPropagation(); neither will make any difference in a listener attached with addEventListener. Your code won't work in Opera, which only allows you to suppress the default browser behaviour in the keypress event, or IE <= 8, which doesn't support addEventListener. The following should work in all browsers, so long as you don't already have keydown and keypress event handlers on the document.

EDIT: It also now filters out events that originated from an <input> or <textarea> element:

function suppressBackspace(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;

    if (evt.keyCode == 8 && !/input|textarea/i.test(target.nodeName)) {
        return false;
    }
}

document.onkeydown = suppressBackspace;
document.onkeypress = suppressBackspace;

edited Oct 03 '10 at 16:56

answered Oct 03 '10 at 16:09

Tim Down

318,141
75
454
536

While this works, it prevents inputs from working. It shouldn't prevent backspace on input elements. – Tower Oct 03 '10 at 16:52
That would be true of your solution too if it worked. I'll edit my answer. – Tim Down Oct 03 '10 at 16:53
Do you think it's possible to do it the other way -- prevent the user from leaving the page rather than trying to stop all backspace actions? – Tower Oct 03 '10 at 17:41
No, you can't stop the user from leaving the page. The browser prevents this, and rightly: it's up to the user if they want to leave the page. There is an `unload` event (and `beforeunload` in many browsers) that fires as the page is about to close or go somewhere else, but you can't suppress that event. – Tim Down Oct 03 '10 at 17:48
unless of course its an application and the user could inadvertently lose there work... browsers now for more than classic websites. – nodrog Nov 19 '12 at 19:42
@nodrog: That's what the `beforeunload` event is for: it allows the page to at least display a warning and ask the user if they really want to leave the page. – Tim Down Nov 20 '12 at 00:24
Thanks Tim, you are right. And I have learned something new... tx – nodrog Nov 26 '12 at 23:01
I don't understand. You say "You don't need `return false`" but that appears to be the method you are using. Also, this method does not seem to work (in Firefox anyway). – Michael Apr 21 '13 at 20:23
Ok, I figured out why. If you are debugging using Firebug and have a breakpoint in your code before the `return false`, Firefox will STILL murder your page and go "back" the instant you hit your breakpoint! – Michael Apr 21 '13 at 20:41
@Michael: `return false` works in my solution because I'm using DOM0 event handler methods (`onkeydown`, `onkeypress`) rather than `addEventListener()`, which is what the OP is using. – Tim Down Apr 22 '13 at 08:42
@MarekBar Example page? – Tim Down Jul 31 '13 at 20:05

score 1 · Answer 2 · answered May 20 '16 at 10:38

If you prefer to simply have the fix for yourself, without affecting other users when scripting into the web page, read below.

Here's some solutions that only change the browser you are using:
- Firefox on Linux "unmapped" the backspace behavior since 2006 so it's not affected; (at any rate, it was simply set to scroll up before then)
- Chrome has just announced that it will do the same from now on; (http://forums.theregister.co.uk/forum/1/2016/05/20/chrome_deletes_backspace/)
- Firefox on Windows can be set to ignore backspace by going into about:config and changing the backspace_action setting to 2; (http://kb.mozillazine.org/Browser.backspace_action)
- Safari ?!

as an enduser using Jupyter notebooks, this answer is a lifesaver. — ShpielMeister, Dec 17 '20 at 22:38

score 0 · Answer 3 · answered Jul 31 '13 at 21:18

I found at Telerik's page script ready to use. Script blocks back button action: by clicking in browser back button and backspace on page. This script works. I'm using it in my project. http://www.telerik.com/community/code-library/aspnet-ajax/general/disable-backspace-from-master-page.aspx

How can I prevent the browser's default history back action for the backspace button with JavaScript?

3 Answers3

Linked