How to restrict keyboard key events in web application?

Question

I am doing the secured web application. My client requirement is to don't allow the application to refresh using the F5 .

Also to restrict events of the Esc , Backspace keys.

I am using the jQuery 1.9.1.

My code is given below.

I can get the alert, but if I press the F5 button my page gets refreshed. I don't know why?

BackSpace also going back to the previous page.

$(document).on('keydown' , function(event) {

    switch (event.keyCode) {

    case 116 : // 'F5'
    alert("116 :"+event.keyCode);
    event.preventDefault();
    event.returnValue = false;
    event.keyCode = 0;;
     break;  

    case 27: // 'Esc'

    alert("27 :"+event.keyCode);
    event.preventDefault();
    event.returnValue = false;
    break;

    case 08: // 'BackSpace'
    if (event.srcElement.tagName == "INPUT"
        || event.srcElement.tagName == "TEXTAREA") {
    } else {
        event.preventDefault();
        event.returnValue = false;
        event.keyCode = 0;  
    }
    break;

    }

});

Can any one point out me where I made a mistake ?

Answer 1

Look here. Try to enter something into input box and try 'f5', 'esc' and 'backspace' keys on frame. It works in jsFiddle under Mac Chrome browser, it should work on your browser also. When you preventing your event you should call stopProagation function. Moreover, when you calling srcElement you should call original events by event.originalEvent.srcElement because normalised jquery event doesn't contain srcElement property. In console it gives undefined property error. Also you have error like following event.keyCode = 0;*;*

$(document).on('keydown' , function(event) {

    switch (event.keyCode) {

    case 116 : // 'F5'
    alert("116 :"+event.keyCode);
    event.preventDefault();
    event.stopPropagation();
            console.log('hello');
     break;  

    case 27: // 'Esc'

    alert("27 :"+event.keyCode);
    event.preventDefault();
    event.stopPropagation();
    break;

    case 08: // 'BackSpace'
    if (event.originalEvent.srcElement.tagName == "INPUT"
        || event.originalEvent.srcElement.tagName == "TEXTAREA") {
            alert("27 :"+event.keyCode);
    event.preventDefault();
    event.stopPropagation();
    } else {
    alert("27 :"+event.keyCode);
    event.preventDefault();
    event.stopPropagation(); 
    }
    break;

    }

});

Answer 2

Here is my solution ,

var x;
var isIE;
var e;
var code;
var ElementType;

document.onkeydown = whichkey;

function whichkey(e) {

    isIE = (document.all ? true : false);

    if (navigator.appName == "Microsoft Internet Explorer") {

    switch (event.keyCode) {
        case 112: //f1 button
            if (isIE) {
                document.onhelp = function() {
                return (false);
                };
                window.onhelp = function() {
                return (false);
                };
            }
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 82: //R button
            if (event.ctrlKey) {
                event.returnValue = false;
                event.keyCode = 0;
                return false;
            }
            else {
                return true;
            }

        case 113: //f2 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 114: //f3 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 115: //f4 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 116: //f5 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 117: //f6 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 118: //f7 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 119: //f8 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 120: //f9 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 121: //f10 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 123: //f12 button
            event.returnValue = false;
            event.keyCode = 0;
            return false;

        case 8: //Backspace button
            if (event.srcElement.tagName == "INPUT" || event.srcElement.tagName == "TEXTAREA") {
                return true;
            }
            else {
                return false;
            }                        
    }
    }
    else {

    if (!e) 
        e = window.event;

    if (e.keyCode) 
        code = e.keyCode;

    else if (e.which) 
        code = e.which;

    if (code == 112) {
        //f1 button
        return false;

    }

    if (code == 8) { // 'BS'

       ElementType = e.srcElement || e.target;
       if (ElementType.tagName == "INPUT" || ElementType.tagName == "TEXTAREA") {
        return true;
        }
        else {

        return false;
        }
    }

    if (code == 113) {
        //f2 button
        return false;

    }

    if (code == 114) {
        //f3 button
        return false;

    }

    if (code == 115) {
        //f4 button
        if (event.altKey) {
        return false;
        }
        else {
        return false;
        }
    }

    if (code == 116) {
        //f5 button
        return false;

    }

    if (code == 117) {
        //f6 button
        return false;

    }

    if (code == 118) {
        //f7 button
        return false;

    }
    if (code == 119) {
        //f8 button
        return false;

    }

    if (code == 120) {
        //f9 button
        return false;

    }

    if (code == 121) {
        //f10 button
        return false;

    }

    if (code == 123) {
        //f12 button
        return false;

    }

    if (code == 18) {
        //altf4 button
        return false;

    }

    if (code == 82) {
        //R button
        if (event.ctrlKey) {
        return false;
        }
        else {
        return true;
        }

    }

    if (event.altKey && event.keyCode == 115) // disable alt+f4
    {
        event.keyCode = 0;
        event.cancelBubble = true;
        return false;
    }

    }
}