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 ?

`switch (event.keyCode) {` Use `event.which` instead, it is jQuery's way of normalizing key events. — Brad M, Dec 30 '13 at 14:49
_"But it doesn't seem to work."_ - What does it seem to do? Do the alerts show? Do you get errors in the console? Also, what's the point of restricting those keys when in most browsers the user can click the equivalent toolbar buttons? — nnnnnn, Dec 30 '13 at 14:51
@Downvoter can post the reason.Then only I didn't make mistake again. — Human Being, Dec 30 '13 at 14:53
forget blocking f5. It's impossible in good browsers and immoral in the rest. The same for the other keys. — John Dvorak, Dec 30 '13 at 14:54
What problem are you trying to solve by blocking F5? FYI: I refresh my pages using ⌘+R. — deceze, Dec 30 '13 at 14:58
No one has ever hit f5 by accident or expecting some alternate result than refreshing the page. Maybe the difficulty you're having is a sign to *stop trying*. — Anthony, Dec 30 '13 at 15:00
downvoted because you're trying to prevent the browser normal behavior and break users' expectations for... what again? Are you trying to force your clients to stay on your page? Why? — John Dvorak, Dec 30 '13 at 15:01
@Jan I am doing the secured web application.My client requirement is to don't allow the application to refresh the site using the `F5` . — Human Being, Dec 30 '13 at 15:03
@ upvoter did you upvote just because this post had negative score? Please don.t do that; it kinda negates the entire point of voting. — John Dvorak, Dec 30 '13 at 15:05
If you're building a kiosk application, your best bet is either 1) a custom browser; quite possibly a stripped down version of Chromium or 2) an AutoHotKey script, blocking the keys. Note it's probably a bad idea to try block the backspace key indiscriminately. — John Dvorak, Dec 30 '13 at 15:11
If you want to prevent accidental exits, hook up the `onbeforeunload` event and return a string. — John Dvorak, Dec 30 '13 at 15:13
@Jan Dvorak I already implemented the `onbeforeunload` in my code. — Human Being, Dec 30 '13 at 15:18
@HumanBeing Read my answer. And comment to my answer. Does it useful? — Khamidulla, Dec 30 '13 at 15:19

Khamidulla · Accepted Answer · 2013-12-30T15:11:19.607

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;

    }

});

score 0 · Answer 2 · answered Feb 18 '14 at 09:44

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;
    }

    }
}

How to restrict keyboard key events in web application?

2 Answers2