Like Us On Facebook

Follow Us On Twitter

Drop Down Menu

Sunday 26 March 2017

How To Disable Copy Paste And Mouse Right Click Using JavaScript, CSS, jQuery, Swift



Unique content is a must for any budding website. Search engines rank your website not just on the basis of backlinks or social media shares, but most importantly how unique your content is and how helpful it is for the audience, which in turn is determined by the visits to a particular post.

 However, not all of us think this way, there are and always will be a subset that just knows how to copy paste content. And the worst case will be when their posts show up higher in the search engine rankings than the original post. I can truly understand how frustrating this can be, especially if bloggers such as me and you devote a lot of time building such websites from the scratch and a small section simply copy pastes that content onto their own website.

 So that's why today I decided to share 4 methods that can be used by you to block such Ctrl A + Ctrl V attempts on your website.

 One method is by using JavaScript which disables copy-paste for your whole website and the other one uses CSS, which can also be used to enable copy-paste for some part of your posts.

 Another one is by disabling mouse right click and disabling copy paste using jQuery.

How To Disable Copy Paste Using JavaScript, CSS, JQuery
You must know that these methods are not full proof, any experienced person can either disable the JavaScript or remove the CSS, but our purpose is to block the majority of those people, you cannot block all of them in any case. So without further ado, let me show you how to disable copy paste on your website using JavaScript and/or CSS and/or jQuery.

 I'll limit these instructions to Blogger users, because I believe WordPress plugins already exists for such purpose. However, you can easily edit your *.css of header or template to use these in your website. If you have any specific questions, please feel free to ask them via comment section at the bottom of this post.

Disable Right Mouse Click Using jQuery:


<script type="text/javascript">
$(document).ready(function () {
    //Disable full page
    $("body").on("contextmenu",function(e){
        return false;
    });
    
    //Disable part of page
    $("#id").on("contextmenu",function(e){
        return false;
    });
});
</script>

Disable Cut, Copy, Paste Using jQuery:


<script type="text/javascript">
$(document).ready(function () {
    //Disable full page
    $('body').bind('cut copy paste', function (e) {
        e.preventDefault();
    });
    
    //Disable part of page
    $('#id').bind('cut copy paste', function (e) {
        e.preventDefault();
    });
});
</script>

Disable Right Mouse Click & Cut, Copy, Paste Using jQuery:


<script type="text/javascript">
$(document).ready(function () {
    //Disable cut copy paste
    $('body').bind('cut copy paste', function (e) {
        e.preventDefault();
    });
   
    //Disable mouse right click
    $("body").on("contextmenu",function(e){
        return false;
    });
});
</script>

For the above 3 codes, the #id is used to disable copy paste on a particular section of a page. Add this only if you want to disable a particular section, otherwise just add the 1st part of the code that has $("body") that'll disable copy paste for the whole page.

Disable Copy Paste Using JavaScript:


<!--Disable Copy Paste www.codingbot.net-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function (&quot;return false&quot;)
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>


If you're on Blogger, you need to add the above code after the <head> in you theme's template.

Disable Copy Paste Using CSS + Enable Copy Paste For Some Content:


/*----- Disable Text Selection with CSS Code ------*/
.post blockquote {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}


If your'e on Blogger, the above CSS code needs to be added before ]]></b:skin> in your theme's template.


 The .post blockquote is used to enable copy paste on specific content of your page. For example, you may be sharing some program code with your users. So this might be useful in your case.

 Also, the above code will work for your template only if it's using .post blockquote CSS class.

 If it's using .post-body blockquote then you need to replace .post blockquote with .post-body blockquote in the above code.

Disable Copy Paste For Whole Page Using CSS:


/*----- Disable Text Selection with CSS Code-------*/
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}

Swift 3:


open override func target(forAction action: Selector, withSender sender: Any?) -> Any? {
    guard isReadonly else {
        return super.target(forAction: action, withSender: sender)
    }
 
    if #available(iOS 10, *) {
        if action == #selector(UIResponderStandardEditActions.paste(_:)) {
            return nil
        }
    } else {
        if action == #selector(paste(_:)) {
            return nil
        }
    }
 
    return super.target(forAction: action, withSender: sender)
}

The benefit of using CSS over JavaScript here is that it's lightweight as compared to JS. Also, JS is relatively easier to block for amateur people than CSS. No offence intended there :)

 Let us know if you need any help regarding any of these codes. I'll be back soon with some more blogger tips and tricks. Till then, adios!
How To Disable Copy Paste And Mouse Right Click Using JavaScript, CSS, jQuery
4.5


Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: Forum link code:
Posted by at
Labels: ,