Entry

How do I block function keys and other keys across IE, NS, and Mozilla?

Nov 12th, 2004 07:13
Tim Cartwright,

The problem with blocking keys is that the browsers handle events 
quite differently. Although the event object in the keydown event in 
Mozilla will report that it is cancelable, it is not. Mozilla keys 
must be canceled in the keypress. Then the issue comes into play 
trying to determine what key was pressed. Say for example you want to 
cancel F5. F5 equates to 116, yet in the keypress event for Mozilla 
the keycode will report 116 for 't'. So, did they press 't' or did 
they press 'F5'? After digging through Mozilla's docs, it seems that 
the answer is derived from using keycode in combination with charcode. 
If the user pressed a letter, the charcode will have a value, else it 
will be 0. IE always reports the charcode as undefined. Here is some 
sample code that works in IE, Mozilla, and NS. 

NOTE: I have not checked all of the older version of those browsers. 
Nor have I checked Opera, or any other browsers.

TO BLOCK KEYS
BROWSER             EVENT           
IE                  keydown
NS                  keypress
Mozilla             keypress

var msg = 'That functionality is restricted.';
var asciiBack       = 8;
var asciiTab        = 9;
var asciiSHIFT      = 16;
var asciiCTRL       = 17;
var asciiALT        = 18;
var asciiHome       = 36;
var asciiLeftArrow  = 37;
var asciiRightArrow = 39;
var asciiMS         = 92;
var asciiView       = 93;
var asciiF1         = 112;
var asciiF2         = 113;
var asciiF3         = 114;
var asciiF4         = 115;
var asciiF5         = 116;
var asciiF6         = 117;
var asciiF11        = 122;
var asciiF12        = 123;
var asciiF11        = 122;

//=====================================================================
==============//
if(document.all){ //ie has to block in the key down
    document.onkeydown = onKeyPress;
}else if (document.layers || document.getElementById){ //NS and 
mozilla have to block in the key press
    document.onkeypress = onKeyPress;
}

function onKeyPress(evt) {
    window.status = '';
    //get the event object
    var oEvent = (window.event) ? window.event : evt;
    
    //hmmm in mozilla this is jacked, so i have to record these 
seperate
    //what key was pressed
    var nKeyCode =  oEvent.keyCode ? oEvent.keyCode :
                    oEvent.which ? oEvent.which : 
                    void 0;
    
    var bIsFunctionKey = false;

    //hmmm in mozilla the keycode would contain a function key ONLY IF 
the charcode IS 0    
    //else key code and charcode read funny, the charcode for 't' 
    //returns 116, which is the same as the ascii for F5
    //SOOO,... to check if a the keycode is truly a function key, 
    //ONLY check when the charcode is null OR 0, IE returns null, 
mozilla returns 0 
    if(oEvent.charCode == null || oEvent.charCode == 0){ 
        bIsFunctionKey = (nKeyCode >= asciiF2 && nKeyCode <= asciiF12) 
|| 
                            (   
                                nKeyCode == asciiALT 
                                || nKeyCode == asciiMS 
                                || nKeyCode == asciiView
                                || nKeyCode == asciiHome
                                || nKeyCode == asciiBack
                            )
    }
    
    //convert the key to a character, makes for more readable code  
    var sChar = String.fromCharCode(nKeyCode).toUpperCase();

    //get the active tag that has the focus on the page, and its tag 
type
    var oTarget = (oEvent.target) ? oEvent.target : oEvent.srcElement;
    var sTag = oTarget.tagName.toLowerCase();
    var sTagType = oTarget.getAttribute("type");
    
    var bAltPressed = (oEvent.altKey) ? oEvent.altKey : 
oEvent.modifiers & 1 > 0;
    var bShiftPressed = (oEvent.shiftKey) ? oEvent.shiftKey : 
oEvent.modifiers & 4 > 0;
    var bCtrlPressed = (oEvent.ctrlKey) ? oEvent.ctrlKey : 
oEvent.modifiers & 2 > 0;
    //var bMetaPressed = (oEvent.metaKey) ? oEvent.metaKey : 
oEvent.modifiers & 8 > 0;

    var bRet = true; //assume true as that will be the case most times
    //alert (nKeyCode + ' ' + sChar + ' ' + sTag + ' ' + sTagType 
+ ' ' + bShiftPressed + ' ' + bCtrlPressed + ' ' + bAltPressed);

    if(sTagType != null){sTagType = sTagType.toLowerCase();}

    //allow these keys inside a text box
    if  (sTag == "textarea" || (sTag == "input" && (sTagType == "text" 
|| sTagType == "password")) && 
        (
            nKeyCode == asciiBack || nKeyCode == asciiSHIFT || 
nKeyCode == asciiHome || bShiftPressed || 
            (bCtrlPressed && (nKeyCode == asciiLeftArrow || nKeyCode 
== asciiRightArrow)))
        ){
        return true;
    }else if(bAltPressed && (nKeyCode == asciiLeftArrow || nKeyCode == 
asciiRightArrow)){ // block alt + left or right arrow
        bRet = false;
    }else if(bCtrlPressed && (sChar == 'A' || sChar == 'C' || sChar 
== 'V' || sChar == 'X')){ // ALLOW cut, copy and paste, and SELECT ALL
        bRet = true;
    }else if(bShiftPressed && nKeyCode == asciiTab){//allow shift + tab
        bRet = true;
    }else if(bIsFunctionKey){ // Capture and stop these keys
        bRet = false;
    }else if(bCtrlPressed || bShiftPressed || bAltPressed){ //block 
ALL other sequences, includes CTRL+O, CTRL+P, CTRL+N, etc....
        bRet = false;
    }
    
    if(!bRet){
        try{
            oEvent.returnValue = false;
            oEvent.cancelBubble = true;

            if(document.all){ //IE
                oEvent.keyCode = 0;
            }else{ //NS
                oEvent.preventDefault();
                oEvent.stopPropagation();
            }
            window.status = msg; 
        }catch(ex){
            //alert(ex);
        }
    }
    return bRet;
}