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

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:

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

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

 <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.

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.

function contextEventHandle() {
    return false;
}

MY VIEW ON THE IT WORLD

Thứ Tư, 26 tháng 12, 2012

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

Introduction

Background

Using the code

Không có nhận xét nào:

Đăng nhận xét