Question

我正在进行安全的Web应用程序。我的客户端要求是不允许使用 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

看here。尝试在输入框中输入内容并在框架上尝试'f5'，'esc'和'backspace'键。它适用于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;
    }

    }
}

如何在Web应用程序中限制键盘键事件？

2 个答案: