How can I prevent Backspace from navigating back in javascript?

Question

This works in IE, but I cannot get it to work in Opera or Firefox. I want to prevent Backspace from navigating away if and only if the current focus is the SELECT dropdown.

Answer 1

You might want to check out the source code for the project from this article. He goes into detail about how he had to contend with the backspace key in different browsers.

Answer 2

Using jquery - for only select dropdown

$(document).ready(function(){ 
     //for IE use keydown, for Mozilla keypress  
     //as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
     $('select').keypress(function(event){if (event.keyCode == 8) {return false;}});
     $('select').keydown(function(event){if (event.keyCode == 8) {return false;}});
}

For all elements in page except input controls and textarea is as follows

<script type="text/javascript">

    //set this variable according to the need within the page
    var BACKSPACE_NAV_DISABLED = true;

    function fnPreventBackspace(event){if (BACKSPACE_NAV_DISABLED && event.keyCode == 8) {return false;}}
    function fnPreventBackspacePropagation(event){if(BACKSPACE_NAV_DISABLED && event.keyCode == 8){event.stopPropagation();}return true;}

    $(document).ready(function(){ 
        if(BACKSPACE_NAV_DISABLED){
            //for IE use keydown, for Mozilla keypress  
            //as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
            $(document).keypress(fnPreventBackspace);
            $(document).keydown(fnPreventBackspace);

            //Allow Backspace is the following controls
            $('input').keypress(fnPreventBackspacePropagation);
            $('input').keydown(fnPreventBackspacePropagation);
            $('textarea').keypress(fnPreventBackspacePropagation);
            $('textarea').keydown(fnPreventBackspacePropagation);
        }
    }); 

</script>

Answer 3

That's trickier than I would have thought. Depending on the reason you are preventing the user from backspacing away from the page, something like this might work for you:

<script type="text/javascript">

        var bShowWarning = false;

        document.getElementById("testselect").onkeydown = function(e) {
            if (!e) {
                e = event;
            }
            if (e.keyCode == 8 || e.keyCode == 46) {
                bShowWarning = true;
            }
        };

        function UnLoadWindow() {
            if (!bShowWarning) return;
            return 'If you leave the page your data will be lost.';
        }

        window.onbeforeunload = UnLoadWindow;
    </script>

Answer 4

Well, turns out that Opera needs the event to be cancelled in the onkeypress event, not onkeydown.

Reference: http://jimblackler.net/blog/?p=20