How can I disabling backspace key press on all browsers?

Question

I'm trying to disable the backspace button on an order page in all cases except when a textarea or text input is an active element to prevent users from accidentally backing out of an order. I have it working fine in most browsers, but in IE (testing in IE9, both regular and compatibility mode) it still allows the user to hit the backspace and go to the previous page.

Here's the code:

$(document).keypress(function(e){
        var activeNodeName=document.activeElement.nodeName;
        var activeElType=document.activeElement.type;
        if (e.keyCode==8 && activeNodeName != 'INPUT' && activeNodeName != 'TEXTAREA'){
            return false;
        } else {
            if (e.keyCode==8 && activeNodeName=='INPUT' && activeElType != 'TEXT' && activeElType != 'text'){
                return false;
            }
        }
    });

Any advice on what I'm doing wrong here?

Thanks!

Answer 1

I think you're overcomplicating that. Rather than checking for an active element, find the event target instead. This should give you the information you need. It's also better to use keydown rather than keypress when there is no visible character. Finally, it's better to use e.preventDefault() for better granularity.

$(document).keydown(function(e) {
    var nodeName = e.target.nodeName.toLowerCase();

    if (e.which === 8) {
        if ((nodeName === 'input' && e.target.type === 'text') ||
            nodeName === 'textarea') {
            // do nothing
        } else {
            e.preventDefault();
        }
    }
});

NB I could have done this the other way round, rather than an empty if block and all the code going in the else block, but I think this is more readable.

Answer 2

Most examples seem to be for the JQuery framework - Here an example for ExtJS

(I've been getting a lot of downvotes for this recently as the question now has JQuery tag on it, which it didn't previously. I can remove the answer if you like as isn't for JQuery but it's proven to help others not using that framework).

To use this add this code block to your code base, I recommend adding it inside the applications init function().

    /**
     * This disables the backspace key in all browsers by listening for it on the keydown press and completely
     * preventing any actions if it is not which the event fired from is one of the extjs nodes that it should affect
     */
    Ext.EventManager.on(window, 'keydown', function(e, t) {     
       var nodeName = e.target.nodeName.toLowerCase();
        if (e.getKey() == e.BACKSPACE) {
            if ((nodeName === 'input' && e.target.type === 'text') ||
                nodeName === 'textarea') {
                // do nothing
            } else {
                e.preventDefault();
            }
        }
    });

Answer 3

Instead of keypress, try the keydown function, it will fire before the actual browser based hook. Also, putting in a preventDefault() function will assist in this. IE :

$(document).keydown(function(e){
   e.preventDefault();
   alert(e.keyCode);
});

Hope this helps.