如何限制 Web 應用程序中的鍵盤按鍵事件？

Question

我正在做安全的網絡應用程序。 我的客戶要求是不允許應用程序使用F5刷新。

也限制Esc ， Backspace鍵的事件。

我正在使用 jQuery 1.9.1。

我的代碼如下。

我可以收到警報，但是如果我按F5按鈕，我的頁面就會刷新。 我不知道為什么？

BackSpace也回到上一頁。

$(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;

    }

});

誰能指出我哪里出錯了？

Answer 1

看這里。 嘗試在輸入框中輸入一些內容並嘗試在框架上使用“f5”、“esc”和“退格”鍵。 它適用於 Mac Chrome 瀏覽器下的 jsFiddle，它也適用於您的瀏覽器。 當你阻止你的事件時，你應該調用 stopProagation 函數。 此外，當您調用 srcElement 時，您應該通過event.originalEvent.srcElement調用原始事件，因為規范化的 jquery event不包含 srcElement 屬性。 在控制台中，它給出了未定義的屬性錯誤。 你也有像下面這樣的錯誤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

這是我的解決方案，

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

    }
}