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.

  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

  3. 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.

  4. 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.

  5. 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.

  6. 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!

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

  8. @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;
    ….

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

  10. 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.

  11. 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
    }
    };

  12. 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
    }
    };

Leave a Comment