Javascript: How can I block the backspace character?

Question

I don't want my website's user to use backspace to go to the previous page,
but I still want to keep the use of backspace,
just like deleting wrong typing.
How can I do?

Thanks a lot.

Answer 1

As others have mentioned there are methods in which you can monitor for backspace key events and perform different actions.

I recommend against catching the backspace key for a couple of reasons:

1) It's simply irritating and irritated users are likely to not return to your page.

2) Backspace is not the only method of returning to the previous page. There are other key combinations that can accomplish the same thing, as well as the obvious "back button".

Don't do it - but if you must, use onbeforeunload() rather than trapping browser specific key strokes.

Answer 2

Solution: Place the following code toward the end of all your pages that contain forms:

<!-- Block the Backspace and Enter keys in forms, outside of input texts and textareas -->
<script type="text/javascript">
    function blockBackspaceAndEnter(e) {
        if (!e) { // IE reports window.event instead of the argument
            e = window.event;
        }
        var keycode;
        if (document.all) {
            // IE
            keycode = e.keyCode;
        } else {
            // Not IE
            keycode = e.which;
        }
        // Enter is only allowed in textareas, and Backspace is only allowed in textarea and input text and password
        if ((keycode == 8
                && e.srcElement.type != "text"
                && e.srcElement.type != "textarea"
                && e.srcElement.type != "password")
                || (keycode == 13 && e.srcElement.type != "textarea")) {
            e.keyCode = 0;
            if (document.all) {
                // IE
                event.returnValue = false;
            } else {
                // Non IE
                Event.stop(e);
            }
        }
    }
    for (var i = 0; i < document.forms.length; i++) {
        document.forms[i].onkeydown = blockBackspaceAndEnter;
    }
</script>

I have the following comments about what other people answered here before:

Someone said:

"Please don't. Users like backspace-to-go-back; going back is one of the most vital browser features and breaking it is intolerably rude."

My answer to him is:

Yes, usually people DO use the back-button to go back, BUT NOT on pages with FORMS. On the other hand it is really easy for people to accidentally click near or outside an input text or textarea, and then press the back button, so they will lose all their edits, as someone else also noticed:

"Users aren't in a textbox and hit the backspace, completely losing all the form information they've just entered. Wouldn't normally be a problem, but for us, we're filling out lots of text on long state forms."

The same undesired behaviour can also be said about the Enter key to submit the form, which usually is only desirable (if ever) for small forms with a few fields, but not for forms with many fields and select boxes and input boxes and textareas, in which most of the time you DO NOT want that the form is submitted when you press Enter.

So this is why I suggest the code above, which applies to all <FORM> tags the function suggested by webster, but without the checks for ALT, which I don't think is useful, and without the checks for CTRL+N and CTRL+R and CTRL+F5, which we don't want to block, because when they are used they are NOT accidental.

Unfortunately, the code above does not work in Firefox when you have DIVs and TABLEs inside your FORM! That is because the keydown event seems to not be propagated to the containing form, and instead the default (UNDESIRED!) behaviour is applied for the Backspace and Enter keys. I couldn't yet find a solution for this one...