Monday, June 1, 2009

Disable text selection on website by using javascript

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

30 comments:

  1. Hey Morshed, I am naive with this html stuff. I am not understanding what is the head section and what indicates it in html?

    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.

    ReplyDelete
  2. Thanks for your query. Below is the sample source code of an web page:

    <html>
     <head>
     </head>
     <body>
         Write anything here which you want to show in your page.
     </body>
    </html>

    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 <head> and </head>.

    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:
    http://www.w3schools.com/html/html_intro.asp

    ReplyDelete
  3. If you need any other help. Please let me know I will try my best..

    ReplyDelete
  4. but it can be selected by select all!

    ReplyDelete
  5. Thank u Marshel , It's Working, Thanks a lot

    ReplyDelete
  6. It's my pleasure to know this and thanks for your comment. Let me if you need any other help....

    ReplyDelete
  7. This is fabulous! Thank you!

    ReplyDelete
  8. 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.

    ReplyDelete
  9. 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.

    ReplyDelete
  10. thanks, it worked!

    ReplyDelete
  11. Hi Alam,
    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...

    ReplyDelete
  12. Hi Bijith,
    I was in full bed rest for two months for a operation on my back, that's why missed your post. Sorry to miss your post.

    I didn't test it under blogger template. It should work if the blogger not restrict the external JS.

    ReplyDelete
  13. Hi Bijith,
    Just now, I have checked the code snippet in my blogger template. It's working. Make sure to checked the "Expand Widget Templates" check box in the top of template editor before putting the code snippet in the header. Hope it will work!

    ReplyDelete
  14. I recommend you to update this post. Few problems with this script are

    1. ctrl+a can select all the text and
    2. Input forms are getting disbled.

    Thanks.

    ReplyDelete
  15. Also I appreciate your time and effort.

    ReplyDelete
  16. @Bhargav, Thank you for your comment and letting me know about that.

    Just now, I added an update to disable ctrl key. Hope it will help you.

    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:


    Form
    input etc
    .........


    Div#text-block
    text to disable selection

    JavaScript:
    document.getElementById('text-block').onmousedown = disableText;
    document.getElementById('text-block').onclick = reEnable;
    ....

    ReplyDelete
  17. Thank you for this best answer

    ReplyDelete
  18. Thank you for this post. Its very helpful to me

    ReplyDelete
  19. Bro,How could i disable the mouse right click???
    Please tell me...

    ReplyDelete
    Replies
    1. I was out of my country that's why couldn't reply in time. Sorry for that.
      In my code snippet both mouse click has been disabled. Use below code to disable right click only.

      window.onmousedown = function(e){
      if(e.button == 2){
      return false
      }
      };

      Delete
  20. Bro,How could i disable the mouse right click???

    ReplyDelete
    Replies
    1. I was out of my country that's why couldn't reply in time. Sorry for that.
      In my code snippet both mouse click has been disabled. Use below code to disable right click only.

      window.onmousedown = function(e){
      if(e.button == 2){
      return false
      }
      };

      Delete
  21. Hello Morshed! You are great!
    I would like to disable "select images". You know, when we press "ctrl + a", i don't want the images toget this blue overlay. Could you please help me out with that? Thank you in advance!

    ReplyDelete
    Replies
    1. Thank you Vitalicious for your comment. You can do that by two ways:

      1. Disabling the ctrl key by adding code snippet bellow:

      window.onkeydown = function(e){
      if(e.ctrlKey == true){
      return false;
      }
      };

      2. Disable user-select property

      div, img {
      user-select:none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      }

      Keep in mind that people still be able to grab content from your website. you can use watermark the image instead.

      Delete
  22. very helpful post...... :)
    Thank you :)

    ReplyDelete