How to set whether the text of an element can be selected or not with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn to set whether the text of an element can be selected or not with JavaScript. Use the userSelect property in JavaScript to enable or disable a text selection. For Firefox, use the MozUserSelect property and set it to none, to disable the selection.

The CSS user-select property can set the text on a web page as selectable or nonselectable. But, sometimes, we must restrict the selection to a triggered event or a condition. Then, we can use the JavaScript DOM that provides nearly all CSS properties.

So, let us look at how to set whether the text of an element can be selected or not.

Using the userSelect Property

The userSelect property of JavaScript DOM is used to set the text of an element as selectable or non-selectable. We need to double-click on a text to select it. At the same time, this property can also set the text to select with only one click.

We can follow the below syntax to use the userSelect property to set if an element's text can be selected or not using JavaScript.

Syntax

var element = document.getElementById(" <your ID here> "); 
element.style.userSelect = "auto || none || text || all";

Parameters

auto − It's a default value. You can select the text.
none − Set the text to non-selectable.
text − Set the text selectable.
all − Set the text selectable with only one click.

Example 1

You can try to run the following code to set whether the text of an element can be selected or not with JavaScript −


<!DOCTYPE html> 
<html> 
<body> 
   <button onclick = "myFunction()">Click me</button> 
   <div id = "box"> 
      Click the above button. This won't allow you to select this text. Shows the usage of userSelect property. 
   </div> 
   <script> 
      function myFunction() { 
         var a = document.getElementById("box"); 
         a.style.userSelect = "none";  
         // Works in Chrome and Safari 
         a.style.WebkitUserSelect = "none";  
         // Works in Firefox 
         a.style.MozUserSelect = "none"; 
      } 
   </script> 
</body> 
</html>

Example 2

In the example, we have added a paragraph inside a div container. The text in the paragraph will not be selectable if the button is clicked.


<html> 
<head> 
   <style> 
      body{ 
         margin: 1%; 
      } 
      #div{ 
         padding: 2%; 
         border: 1px solid red; 
         width: 500px; 
         text-align: center; 
         margin: 5px; 
      } 
      #btn{ 
         font-size: larger; 
         background-color: black; 
         color: white; 
         margin: 5px; 
      } 
   </style> 
</head>
<body>  
   <h3>Use <i>userSelect property</i> to set whether the text of an element can be selected or not</h3>  
   <div id = "div">This is a div 
      <p id = "para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, nesciunt. Ullam corporis eaque culpa, corrupti earum aut perferendis rerum sequi!</p> 
   </div> 
   <button id = "btn"> Apply </button>  
   <script>  
      document.getElementById("btn").addEventListener("click", Apply);  
      function Apply(){ 
         document.getElementById("para").style.userSelect="none"; 
         document.getElementById("para").style.color="#949494"; 
      }  
   </script>  
</body> 
</html>

In the above example, users can see that we have used the userSelect property to set the text in the paragraph non-selectable on a button after clicking it.

Example 3

In the example below, we have added four radio buttons that are the values of the userSelect Property. After selecting any radio button, the userSelect property will be applied to the text in the div container.


<html> 
<head> 
   <style> 
      #container{ 
         padding: 2%; 
         border: 2px dotted purple; 
         width: 500; 
         text-align: center; 
         margin: 5px; 
      } 
   </style>  
</head> 
<body>
   <h3>Use <i>userSelect</i> property to set whether the text of an element can be selected or not</h3> 
   <div id = "container">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, voluptatem velit! Magni eligendi quibusdam distinctio, temporibus ad beatae? Quas, reiciendis.</div>  
   <br> 
   Apply userSelect with one of the following values and try to select the above text:  
   <br>  
   <input type = "radio" name = "radio_btn" id = "Auto" value = "auto" onchange = "selected()"/> 
   <label for = "Auto"> auto </label> <br> 
   <input type = "radio" name = "radio_btn" id = "None" value = "none" onchange = "selected()"/> 
   <label for = "None"> none </label> <br> 
   <input type = "radio" name = "radio_btn" id = "Text" value = "text" onchange = "selected()"/> 
   <label for = "Text"> text </label> <br> 
   <input type = "radio" name = "radio_btn" id = "All" value = "all" onchange = "selected()"/> 
   <label for = "All"> all </label> <br>  
   <script>  
      var element = document.getElementById("container");  
      function selected(){ 
         var radio_selected = document.querySelector( 'input[name="radio_btn"]:checked');    
         element.style.userSelect = radio_selected.value; 
         if(radio_selected.value == "none"){ 
            element.style.color = "#949494"; 
         } 
      }  
   </script> 
</body> 
</html>

In the above example, users can see that we have applied the "all" property value for userSelect. This helps us in selecting a text. We can select a text using only one click with the "all" value of the property.

In this tutorial, we have learned to set whether the text of an element can be selected or not with JavaScript.