jQuery: prevent copying elements from webpage

4 10 2014

Want to prevent users copying text or images on your website? Or maybe you need to add custom behaviour on Ctrl+C click event?

With jQuery you can intercept the event of copying, pasting, cutting or dragging & dropping the element on your webpage.

Prevent copying

In my case I needed to prevent copying images on webpage (the whole body). This is the method I call on document.ready callback:

var preventCopyPaste = function(){
	$('body').bind('copy paste cut drag drop', function (e) {
   		e.preventDefault();
	});
};

If you need any other custom action to be performed instead of preventing default behaviour, just implement it in method body.

Test it!

Try to copy any image from karomile.com, where I used this method. If you manage to do it – let me know how you did it. I’ll make it even more bulletproof :)

I suspect that there is one way of doing it…

Did I help you?
I manage this blog and share my knowledge for free, sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Donate Button with Credit Cards

Thank You!

Advertisements

Actions

Information

3 responses

8 10 2014
christo

google chrome , “inspect element” -> shows the img URL

14 10 2014
Jacek Milewski

Right. Do you know how to hide it? Preferably with JavaScript

15 02 2017
cool guy

http://karomile.com/img/content/favicon.jpg this is your fevicon url, inspect element is still working

Give Your feedback:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: