jQuery: prevent copying elements from webpage

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

Thank You!