Web Development » Disable selecting text with Javascript & jQuery!

Disable selecting text with Javascript & jQuery!

Today I had a client request the ability to prevent his customers from copying and pasting certain sections of text. Easy enough right? We’ll just toss a transparent div on top of that and call it a day… but what about when he wanted the ability to do it himself, and easily? He knows enough to add a class to an element, but not enough to add custom divs (and we shouldn’t expect him to remember the process everytime should we?) That’s when I started looking for an elegant solution with jQuery. Continue reading to see what I found…

With this nice little plugin, our client is able to simply add the class ‘noSelect’ to any element he wants to prevent select + copy and past on. Sure, this isn’t a fool proof method, and anyone that knows what they’re doing, even a little bit, with firebug can work around it. For this instance, it does the trick though.

Useage:

$(‘.noSelect’).disableTextSelect();

You can also re-enable it:

$(‘.noSelect’).enableTextSelect();

So, I hope that helps you out… it sure was useful for me!

<< download the jQuery plugin >>

*Remember: You must already have jQuery included. You can download the most recent version of jQuery at http://www.jquery.com.

Comments