Articles → JavaScript → Disable Text Selection Using Javascript

Disable Text Selection Using Javascript

Securing the information on a web based application is an important task for any web developer. If the web developer is not serious about the security then it is possible that some unauthorized visitor can steal the information that you want it to be secured.

Stealing the information from the website (or a web based application) can be hacking of password and get the financial information or it can be copying the contents from the website. In this tutorial we will look into the later part and see how we can save our contents from being copied.

In this tutorial we will create a sample html page and use JavaScript to secure the content in the div tag. Let us break the task of implementation into various subtask.

Create a div tag and add contents into it.
Create a JavaScript function
Call the JavaScript function.

Create A Div Tag And Add Contents Into It

<div id="mydiv">
Welcome to Gyan Sangrah: A one stop shop for people preparing for technical interviews. 
Gyansangrah is an online resource comprising all the possible questions you may face during your technical 
interview round. Gyansangrah also provides you with live examples to make concepts easier to understand.
</div>

Here I have created a div tag and add contents (which needs to be secured from the selection) in it. I have given the Id of the div as "mydiv". This id will be passed into the JavaScript function.

Create A Javascript Function

Now we will create the JavaScript function which takes the div as input parameter.

<script type="text/javascript">
  function disableSelection(target) {
  if (typeof target.onselectstart != "undefined") //IE route   
    target.onselectstart = function() {
      return false
    }
  else if (typeof target.style.MozUserSelect != "undefined") //Firefox route
  {
    if (typeof target.style.MozUserSelect != "none") {
      target.style.MozUserSelect = "none";
    }
  } else //All other route (ie: Opera)   
    target.onmousedown = function() {
      return false
    }
}
</script>

Now I will explain some basic terms after that it will be lot easier to understand the code I have given above.

Onselectstart event → This event will be invoked when user clicks the mouse and start selection of the contents on the website. But there is a limitation of this event; this event is not compatible with Mozilla and Opera browsers.

MozUserSelect property → As I have explained earlier that the onselectstart event is not compatible with Mozilla and Opera so we have to use some other tricks to stop the selection of text on these browsers. When we talk about mozilla then this property comes into the picture. This property specifies the selection behaviour of an element.

Here I am not explaining the different permissible values of this CSS property but will explain one value which is important for us to understand the code i.e.

{-moz-user-select: none;}

So when we set the value as none then it means no content is selected.

Onmousedown event → This event is invoked when we click the mouse (either right click or left click)

Now we are equiped with enough information to understand the code well.

In the first line of code we are checking weather the onselectstart is not "undefined". The value is undefined in IE, Safari and Chrome when the user is not selecting any text. So if this is not undefined then it means that user is selecting the text so the code return false will stop the user from selecting the text

second if condition is for mozilla browser if the MozUserSelect is not undefined then it means there is some value in it. In the next condition we are checking whether the value of the property is none or not. If the value is not none then set the value to none. In the Mozilla browser this code will stop the user from selecting the text.

Now the last condition in which we are using the event onmousedown. This is for Opera because we have handled rest of the browsers in the above code. Finally when the user clicks mouse then return false will stop the user from selecting the text.

Call The Javascript Function

<script type="text/javascript">
  disableSelection(document.getElementById("mydiv"));
</script>

Code

<!DOCTYPE html>
<html>
<head>
    <title>Disable Text using JavaScript</title>
    <script type="text/javascript">
        function disableSelection(target) {
            if (typeof target.onselectstart != "undefined") {
                // IE route
                target.onselectstart = function () { return false; };
            } else if (typeof target.style.MozUserSelect != "undefined") {
                // Firefox route
                if (typeof target.style.MozUserSelect != "none") {
                    target.style.MozUserSelect = "none";
                }
            } else {
                // All other route (e.g., Opera)
                target.onmousedown = function () { return false; };
            }
        }
    </script>
    <style type="text/css">
        #mydiv {
            -moz-user-select: none;
        }
    </style>
</head>
<body>
    <form id="form1">
        <div id="mydiv">
            Welcome to Gyan Sangrah: A one stop shop for people preparing for technical interviews.
            Gyansangrah is an online resource comprising all the possible questions you may
            face during your technical interview round. Gyansangrah also provides you with live
            examples to make concepts easier to understand.
        </div>
    </form>
    <script type="text/javascript">
        disableSelection(document.getElementById("mydiv"));
    </script>
</body>
</html>

Try It

Posted By -	Karan Gupta

Posted On -	Thursday, August 18, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**