Morshed Alam
Morshed Alam Software Architect

Disable text selection on website by using javascript

• By Morshed Alam • Security
Sometimes you may need to disable text selection of an HTML page. It is very easy way how you can do it. Below is the source codes:
<script type="text/javascript" language="JavaScript">
function disableText(e){
return false;
}
function reEnable(){
return true;
}
//For browser IE4+
document.onselectstart = new Function ("return false");

//For browser NS6
if (window.sidebar){
document.onmousedown = disableText;
document.onclick = reEnable;
}
</script>
Just copy the above JavaScript codes into your page under head section. Then whatever you write in your page everything will show in read-only mode.


Update:
Add following code to disable text selection on any key pressed:
window.onkeydown = disableText;
Add following code to disable text selection on ctrl key pressed:
window.onkeydown = function(e){
if(e.ctrlKey == true){
return false;
}
};

Click here to see the demo

Comments (30)

Opaque
Hey Morshed, I am naive with this html stuff. I am not understanding what is the head section and what indicates it in html? <br /><br />So, if you could quote the html line that indicates the head section, it would help people like me to know where to insert this code. Thanks in advance.
Morshed Alam Author
Thanks for your query. Below is the sample source code of an web page:<br /><br />&lt;html&gt;<br />  <b>&lt;head&gt;</b><br />  <b>&lt;/head&gt;</b><br />  &lt;body&gt; <br />     Write anything here which you want to show in your page.<br />  &lt;/body&gt;<br />&lt;/html&gt;<br /><br />In the above code the bold section are called head section. To disable text selection of your web page copy the code(which i described in my blog) in between <b>&lt;head&gt;</b> and <b>&lt;/head&gt;</b>.<br /><br />You will get lots of HTML tutorial in web by which you can learn how to build web page. Following is one of the best website to learn html: <a href="http://www.w3schools.com/html/html_intro.asp" rel="nofollow ugc"><br />http://www.w3schools.com/html/html_intro.asp</a>
Morshed Alam Author
If you need any other help. Please let me know I will try my best..
Anonymous
hmm...nice buddy
Amin
but it can be selected by select all!
Brenda
Nice post!
Suresh
Thank u Marshel , It&#39;s Working, Thanks a lot
Morshed Alam Author
It&#39;s my pleasure to know this and thanks for your comment. Let me if you need any other help....
Anonymous
This is fabulous! Thank you!
Anonymous
im facing a problem, i used this code you have given. bt this doesnt work when the page is loading. most of the thieves just stop page and copy the text from my site. the code just works when the page is completly loaded.
Morshed Alam Author
Seems, thieves copy the text before loading the JavaScript. I think you have not added the script in the top of header portion because your text were loaded before the script. My suggestion is to add the script at the top of the header or can generate the text as a image in your website.
Anonymous
thanks, it worked!
Bijith :|: ബിജിത്‌
Hi Alam,<br />I tried to copy this code in the template designer ( html ) in blogger, but this is not working, I can still copy the text. Did you check this code for the latest themes...
Morshed Alam Author
Hi Bijith, <br />I was in full bed rest for two months for a operation on my back, that&#39;s why missed your post. Sorry to miss your post.<br /><br />I didn&#39;t test it under blogger template. It should work if the blogger not restrict the external JS.
Morshed Alam Author
Hi Bijith, <br />Just now, I have checked the code snippet in my blogger template. It&#39;s working. Make sure to checked the &quot;Expand Widget Templates&quot; check box in the top of template editor before putting the code snippet in the header. Hope it will work!
Bijith :|: ബിജിത്‌
Thank You Alam.
Unknown
I recommend you to update this post. Few problems with this script are<br /><br />1. ctrl+a can select all the text and<br />2. Input forms are getting disbled.<br /><br />Thanks.
Unknown
Also I appreciate your time and effort.
Morshed Alam Author
@Bhargav, Thank you for your comment and letting me know about that. <br /><br />Just now, I added an update to disable ctrl key. Hope it will help you.<br /><br />Regarding form - I think it would be better for you to disable text selection of a specific block and keep form outside of that block like:<br /><br /><br />Form <br /> input etc<br /> .........<br /><br /><br />Div#text-block<br /> text to disable selection<br /><br />JavaScript:<br />document.getElementById(&#39;text-block&#39;).onmousedown = disableText;<br />document.getElementById(&#39;text-block&#39;).onclick = reEnable;<br />....
Harsha
Thank you for this best answer
Harsha
Thank you for this post. Its very helpful to me
Vitalicious
Hello Morshed! You are great!<br />I would like to disable &quot;select images&quot;. You know, when we press &quot;ctrl + a&quot;, i don&#39;t want the images toget this blue overlay. Could you please help me out with that? Thank you in advance!
Morshed Alam Author
Thank you Vitalicious for your comment. You can do that by two ways:<br /><br />1. Disabling the ctrl key by adding code snippet bellow:<br /><br />window.onkeydown = function(e){<br />if(e.ctrlKey == true){<br />return false;<br />}<br />};<br /><br />2. Disable user-select property<br /><br />div, img {<br />user-select:none;<br />-moz-user-select: none;<br />-webkit-user-select: none;<br />-ms-user-select: none;<br />}<br /><br />Keep in mind that people still be able to grab content from your website. you can use watermark the image instead.<br />
Anonymous
Working Well, thank you
Mak Reza
Bro,How could i disable the mouse right click???<br />Please tell me...
Mak Reza
Bro,How could i disable the mouse right click???
Morshed Alam Author
I was out of my country that&#39;s why couldn&#39;t reply in time. Sorry for that.<br />In my code snippet both mouse click has been disabled. Use below code to disable right click only.<br /><br />window.onmousedown = function(e){<br /> if(e.button == 2){<br /> return false<br /> }<br />};
Morshed Alam Author
I was out of my country that&#39;s why couldn&#39;t reply in time. Sorry for that.<br />In my code snippet both mouse click has been disabled. Use below code to disable right click only.<br /><br />window.onmousedown = function(e){<br /> if(e.button == 2){<br /> return false<br /> }<br />};
vithya vijayan
very helpful post...... :)<br />Thank you :)
Mahadi Matsawily
it was helpful. thanks

Leave a Comment