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.

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.

• javascript
• events

• Have you tried trapping keypress and/or keyup instead? – Daniel Vandersluis Commented Oct 3, 2010 at 15:53
• Which browser does this fail in? – Tim Down Commented Oct 3, 2010 at 15:59
• Related Question: SO: How can I prevent the backspace key from navigating back? – reto Commented Jul 31, 2013 at 7:06

3 Answers 3

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;

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 ?!

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