Disable Right Click, Dragging images and Selecting Text With Javascript & CSS

Share the love!

Hello friends well i am back with an amazing script which will allow you to disable dragging images and right click + with the help of CSS we will disable selecting text, as you know that lastly i explained about blogger conditional tags which are very important part for blogger users, and today our topic is to Disable Right Click, Dragging images and Selecting Text With Javascript & CSS. So lets start, some people need privacy of their content as well as of their images, well in this case they can disable right click or selecting text but that script makes our page heavy because of its size + it take time to start and sometimes it does not work, so i am going o share you the finest method, This is the best solution which i will prefer you to use Because, it is very light weight and made up of pure JavaScript no need of jquery. and better + faster than all scripts which are currently used for disabling right click, CTRL key, F12 Key.

Lets have a look-

Adding The CSS

The below CSS will help us to protecting selecting text well i am not sure for the below 3 properties so you can try them if they work they work well in chrome and mozilla.

body {
-webkit-user-select:none;
-moz-user-select:none;
/* Not sure for the below properties they may not work properly */
-o-user-select:none;
-ms-user-select:none;
user-select:none;
}

Adding The JavaScript

The below JavaScript is written by me a long time ago when i was just started using js then i made some changes and now this will help you a lot as it can disable the below things -

  • Image Dragging
  • CTRL key + most of commands run with CTRL key like - CTRL + A, CTRL + C, CTRL + S, CTRL + U etc.
  • F12 Key
  • Right Click

// © Mohammadwali.in (www.mohammadwali.in)
// For full source Visit - http://blog.mohammadwali.in
document.onkeypress = function(event) {
event = (event || window.event);
if (event.keyCode === 123) {
return false;}};
document.onmousedown = function(event) {
event = (event || window.event);
if (event.keyCode === 123) {
return false;}};
document.onkeydown = function(event) {
event = (event || window.event);
if (event.keyCode === 123) {
return false;}};
function cp() {return false;}
function mousehandler(e) {
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if ((eventbutton == 2) || (eventbutton == 3))
return false;}
document.oncontextmenu = cp;
document.onmouseup = cp;
var isCtrl = false;
window.onkeyup = function(e)
{if (e.which == 17)
isCtrl = false;}
window.onkeydown = function(e)
{if (e.which == 17)
isCtrl = true;
if (((e.which == 85) || (e.which == 65) || (e.which == 88) || (e.which == 67) || (e.which == 86) || (e.which == 83)) && isCtrl == true){
return false;}}
document.ondragstart = cp;

All Done!

So this was how you can protect your content With the help of JavaScript and CSS. Well thanks for visiting and if you have any doubt or any better idea don't forget to make a comment. Keep visiting!

Comment with-

Disqus Blogger Google Facebook

0 comments:

Post a Comment

Comments :