Click here to Skip to main content
15,867,991 members
Articles / Web Development / HTML
Tip/Trick

Prevent user hit some special keywords(Ctrl, Shift...) and access context menu on webpage.

Rate me:
Please Sign up or sign in to vote.
4.90/5 (27 votes)
26 Dec 2012CPOL 24.7K   139   8
Sometime, you dont want user press down some special keys such as Ctrl, Shift.. and view the context menu on webpage, you need to define javascript functions to achieve it. The main issue here is there are a lot of browsers and their version too. How we can do it?

Introduction

This article will show you guys how to prevent user press down some special keys such as Shift, Ctrl.. and access context menu on webpage. It will make sure it will support the most of modern browsers in currently.  

Background

Define javascript function and place it in body onload event on your page.

Using the code

Firstly, you have to define a javascript routine to do this job:  

HTML
function restrainIllegalOperation(){
   document.onkeydown = keyEventHandle;
   document.oncontextmenu = contextEventHandle; 
}  

You will place the above routine in body onload event like this: 

HTML
<body onload="restrainIllegalOperation()">
</body>

 Now is the definitions of the two most important routine :  keyEventHandle and  contextEventHandle.

With keyEventHandle, the are some special keys :Ctrl+R, Ctrl+F5, F5, Alt, ESC, Backspace.

JavaScript
function keyEventHandle(e) {
    // The information under keys is registered.
    var shift, ctrl, alt;
	
    // Mozilla(Firefox, NN) and Opera
    if (e != null) {
        keycode = e.which;
        ctrl    = typeof e.modifiers == 'undefined' ? e.ctrlKey : e.modifiers & Event.CONTROL_MASK;
        shift   = typeof e.modifiers == 'undefined' ? e.shiftKey : e.modifiers & Event.SHIFT_MASK;
        alt   = typeof e.modifiers == 'undefined' ? e.altKey : e.modifiers & Event.ALT_MASK;
    // Internet Explorer
    } else {
        keycode = event.keyCode;
        ctrl    = event.ctrlKey;
        shift   = event.shiftKey;
        alt     = event.altKey;
    }

    // Ctrl + R
    if((ctrl && keycode == 82) || (ctrl == 17 && keycode == 82)) {
        // Mozilla(Firefox, NN) and Opera
        if (e != null) {
            // The higher rank propagation of an event is prevented. 
        	e.which = 0;
            e.preventDefault();
            e.stopPropagation();
        // Internet Explorer
        } else {
            // The higher rank propagation of an event is prevented. 
        	event.keyCode = 0;
            event.returnValue = false;
            event.cancelBubble = true;
        }
        return false;
    }
    
    // Ctrl + F5
    if((ctrl && keycode == 116) || (ctrl == 17 && keycode == 116)) {
        // Mozilla(Firefox, NN) and Opera
        if (e != null) {
            // The higher rank propagation of an event is prevented. 
        	e.which = 0;
            e.preventDefault();
            e.stopPropagation();
        // Internet Explorer
        } else {
            // The higher rank propagation of an event is prevented. 
        	event.keyCode = 0;
            event.returnValue = false;
            event.cancelBubble = true;
        }
        return false;
    }
    
    // F5
    if(keycode == 116) {
        // Mozilla(Firefox, NN) and Opera
        if (e != null) {
            // The higher rank propagation of an event is prevented. 
        	e.which = 0;
            e.preventDefault();
            e.stopPropagation();
        // Internet Explorer
        } else {
            // The higher rank propagation of an event is prevented. 
        	event.keyCode = 0;
            event.returnValue = false;
            event.cancelBubble = true;
        }
        return false;
    }
    
    // Alt 
    if((alt && keycode == 37) || (alt == 18 && keycode == 37)) {
        // Mozilla(Firefox, NN) and Opera
        if (e != null) {
            // The higher rank propagation of an event is prevented. 
        	e.which = 0;
            e.preventDefault();
            e.stopPropagation();
        }
        return false;
    }

    // ESC
    if(keycode == 27) {
        // Mozilla(Firefox, NN) and Opera
        if (e != null) {
            // The higher rank propagation of an event is prevented. 
        	e.which = 0;
            e.preventDefault();
            e.stopPropagation();
        // Internet Explorer
        } else {
            // The higher rank propagation of an event is prevented. 
        	event.keyCode = 0;
            event.returnValue = false;
            event.cancelBubble = true;
        }
        return false;
    }

    // BackSpace
    if(keycode == 8) {
        if ((document.activeElement.type == "text") || 
          (document.activeElement.type == "textarea") ||
          (document.activeElement.type == "password") ||
          (document.activeElement.type == "file")) {
            if(!document.activeElement.readOnly) {
                return true;
            }
        }
        // Mozilla(Firefox, NN) and Opera
        if (e != null) {
            // The higher rank propagation of an event is prevented. 
        	e.which = 0;
            e.preventDefault();
            e.stopPropagation();
        // Internet Explorer
        } else {
            // The higher rank propagation of an event is prevented. 
        	event.keyCode = 0;
            event.returnValue = false;
            event.cancelBubble = true;
        }
        return false;
    }

    // Mozilla(Firefox, NN) and Opera
    if (e != null) {
    	// In MacOS, Cmd+R (renewal of a Web page and cash) deters.
    	if (e.metaKey && keycode == 82) {
    		return false;
    	}
    	
    	// In MacOS, it is Cmd+. Control of [(it moves to a front page) 
    	if (e.metaKey && keycode == 219) {
    		return false;
    	}
    } 
} 

 The contextEventHandle() routine is so simple like this, just return false.

JavaScript
function contextEventHandle() {
    return false;
}  

Points of Interest

This is useful when woring with Japanese clients.

History 

First post on Dec 26, 2012

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Comments and Discussions

 
GeneralMy vote of 5 Pin
uyentran311@yahoo.com10-Jan-13 14:47
uyentran311@yahoo.com10-Jan-13 14:47 
GeneralRe: My vote of 5 Pin
WebMaster10-Jan-13 14:54
WebMaster10-Jan-13 14:54 
GeneralRe: My vote of 5 Pin
WebMaster10-Jan-13 14:54
WebMaster10-Jan-13 14:54 
GeneralMy vote of 5 Pin
Phat (Phillip) H. VU3-Jan-13 15:15
Phat (Phillip) H. VU3-Jan-13 15:15 
GeneralRe: My vote of 5 Pin
WebMaster10-Jan-13 14:54
WebMaster10-Jan-13 14:54 
GeneralMy vote of 5 Pin
Member 97262843-Jan-13 3:54
Member 97262843-Jan-13 3:54 
GeneralRe: My vote of 5 Pin
WebMaster10-Jan-13 14:55
WebMaster10-Jan-13 14:55 
GeneralMy vote of 5 Pin
WebMaster26-Dec-12 14:36
WebMaster26-Dec-12 14:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.