July 6, 2012

How to Disable Text Selection on Your Website




At some point, have you ever thought about disabling text selection on your blog or website? Yeah, to prevent selecting text on your pages. Not just for fun though. Hmm... It may be your whole content, or just few pages which you need to make sure your visitors can't select and copy specific texts. You content is already being copied by content scrappers and wanna figure out how to stop them?


Right Click Menu vs Text Selection


We have already learnt how to disable right click menu on your blog or website easily by adding a single script to your site. It's really helpful to prevent copying directly and also prevents accessing source code of your site. Just for the security purposes.

However you will be missing the opportunity of having right click menu and it's options available for your visitors. It can be affected on the user experience. For example, if your readers use right click menu for different activities such as sharing, searching with browser add-ons or extensions installed, then they have to find alternatives. However it's your choice to implement and protect your content or improve the user experience.


Wanna Disable Text Selection?


My friend +Bren Lee popped up on post about disabling right click menu and mentioned she's really fond of right click menu and she found it buggy if the right click menu disabled on a site. With that feedback in mind, I had to look out for an alternative where right click menu can be enabled while preventing the content theft for some extent. Did I? Why not!

Instead of disabling right click menu, disable the text selection!

If you are wishing to disable text selection on your blog or website without being a code genic, I would like to offer you a simple solution I found online. It's a simple script and simply disables the text selection on web pages. It can be whole content or just a part of it. Would you like to try it out? Let's go.


Steps:

1 First, copy below code snippet and paste just before </head> tag.

Note: If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target) {
if (typeof target.onselectstart!="undefined")
 target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined")
 target.style.MozUserSelect="none"
else
 target.onmousedown=function(){return false}
target.style.cursor = "default"
}

</script>

2. Now add following script, just before the </body> tag.

<script type="text/javascript">
disableSelection(document.body)
</script>

Note: In case if you need to disable text selection only for a specific section or division, you can add following script instead of above.

<script type="text/javascript">
var dtsec=document.getElementById("[Element ID]")
disableSelection(dtsec)
</script>

Color Indication Information:

   - Element ID

Here you have to specify the exact page element ID you are referring to.

For example, assume we are gonna disable text selection for below paragraph and you need to specify its element ID within the script. I've highlighted the ID to make it easier for you.

<p id="Paragraph">I need to disable text selection, ONLY for this paragraph.</p>

For this example, script changes as follows.

<script type="text/javascript">
var dtsec=document.getElementById("Paragraph")
disableSelection(dtsec)
</script>


More Information:

* If you're a Blogger user and wanna implement right click disabling script for specific pages, read How to Show/Hide Elements on Different Pages in Blogger.


Credits: The credit of offering this Right Click Disabling script should goes to Maximus and moderators at DynamicDrive.com.



Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Brenda said...

Awesome tips my friend! 

JB said...

Great tips. I believe in the principle 'sharing is caring' but if by using these script 'content theft' can be prevented, that's a good deal!

Mayura De Silva said...

Hi Brenda,

Ha ha, you made me write this one dear :) Thanks for always sending your suggestions. I hope you would prefer this one rather than right click menu disable script we discussed last time.

Thanks for commenting dear :)

Have a great weekend ahead !

Cheers...

Mayura De Silva said...

Hi Jan,

Absolutely mate :) "Sharing is Caring"... Here I'm mostly concentrated on content theft and share buttons, extensions and plugins are there for sharing our content right? :)

So in case if you need to prevent copying on a specific page, you can make use of it. Or right click menu disable option discussed in last post is there for you too. We never know until we needs it, no? ;) Just need to make use of available resources for own good. We responsible for our content, even to secure 'em.

Thanks for commenting and always appreciate your input :)

Enjoy your weekend ahead !

Cheers...

Brenda said...

Hmm glad I could help? :) 

Mayura De Silva said...

Always dear :) Eventhough unwittingly... That's why I always say I have awesome friends around...

Cheers...

Harleena Singh said...

Sounds interesting Mayura!

I love the way you come up with unique things, which I surely have no idea about - as it helps many people like me for sure. :)

However, isn't this similar to Tynt you had mentioned in an earlier post? Or which one of the two is really better, or do we need to have both of these? You are the best person to ask about this. :)

Thanks for sharing about yet another cool feature. :)

Mayura De Silva said...

Hi Harleena,

Tynt helps benefit from content being copied. It adds more SEO value for our content. So if you are alright with copying your content and getting more SEO juice in return, Tynt is better for your content pages dear. Else if you just need others to read your content but never let them copy text and don't expect more SEO value via copying and pasting content, then you can disable text selection to prevent content theft.

Disabling text selection is to prevent copying dear. People won't be able to select text anymore. If you have a page except for content or post pages, where you need no one to copy text but read, this will be work for them.

For example, applying Tynt on "About Me" page is irrelevant. Mostly it doesn't being copied, but it's there for readers or visitors to read and know about you. Anyway sharing link of that page would be alright. Think you have created really creative "About Me" page and you know, there are people try to copy other things as it is. Believe me, I found my same "About" page somewhere else online. So they will copy and use it on their sites with small changes. But generally, no one needs to copy "About Me" page content. So preventing text selection would be better there as it just prevent content scrappers from copying and enforce only to read it.

Hope it helps you to get more idea on it dear :) If not, you're always welcome for further questions. Also check my About page, text selection disabled there.

Thanks for your wonderful compliments dear :)

Have a nice week ahead !

Cheers...

Harleena Singh said...

Understood well now Mayura. :)


Thanks so much for the wonderful explanation. Guess Tynt it should be then, though I still need to get it done, but this is a great reminder alright. :)

Mayura De Silva said...

Owkies ;) Sure dear. See you made a decision and it depends on your choice and how you wanna handle your content. If you ever need to disable text selection on pages, now you know it's possible. Isn't that we call learning? ;)

Cheers...

donna_tribe said...

What a great idea Mayura,

Every time I visit your blog I learn so much.  Yes, there is a lot of swiping going on.  I have noticed that.  I didn't know this could be done.  Thank you so much for sharing your incredible knowledge.
Cheers,
Donna

Mayura De Silva said...

Hi Donna,

I remember you saying what you have experienced on swiping dear :) Terrible when we get to know and sometimes we never know. I think this will be really helpful on it as long as content theft is the main concern. Anyway now you know it can be done and it's your time to rock and roll with it :)

Thanks for commenting and appreciate your nicey compliments too dear :)

Cheers...

Hamxa Wasim said...

Nice Tips and posts friend!

Mayura De Silva said...

Hi Paul,

Well, there are different ways to prevent copying text and images online but still there are tricks to get through and copy the content :) Don't worry, 'cause not everyone would aware of that and might be discouraged as they couldn't select the text in first place.

News readers enable copying and if you send content via email, then it's possible too. I couldn't find any sort of a way to prevent copying on a reader. The best way is to limit the text in the feed which reflects in reader applications, without showing all the text. So they will come to your site to view whole story :)

Anyway it depends on your requirement and if there are more people love to read via a reader application, they wouldn't like it :) Actually we can't prevent copying all the time, but minimize where we capable.


Remember it should not hurt the reader experience too :)


Hope it helps and keep searching more about it, you might find a solution or alternative :)

Thanks for your compliment too Paul :)

Cheers...

Ravi Kumar said...

Hey thanks a lot for this post. I found this after searching a lot. I have wordpress sites and I;m offering list of directories on my wordpress sites. I want that no one could not be able to select the text of that particular page where list is live. I tried your source code but this would not work.on my wordpress site.

can you please help me if there is anyway to do same with wordpress sites also?

Thanks,

Mayura De Silva said...

Hi Ravi,

You can easily use a plugin on WordPress ~ WordPress Data Guard Security - Lite.

Cheers...

Mayura De Silva said...

Hi Mate,


Prevent copying doesn't prevent sharing at all :) It's just prevent selecting and copying your content on your site, but still there are ways to copy 'em. It's just one action you can take to secure your content from content theft.


Usually blind people use readers to read content on a site and it doesn't matter if you have implemented this JavaScript :) This only valids for JavaScript enabled browsers. Else, anyone can select text eventhough you implemented this JavaScript and when they read it via a reader, copying is possible :)


Thanks for coming over and sharing your thoughts and questions on it :)

Cheers...

Zenu Khas said...

Unfortunately it didn't worked for me :/ nice post though.

Mayura De Silva said...

Hi Zenu,


You were right :) It wasn't working and I had to make few changes.

Now I've updated the post with new changes and you can give it a try again mate :)

Thanks for letting me know about the issue it had Zenu :)

Cheers...

Zenu Khas said...

Ohk :) will try it later ..