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 :-)