June 19, 2021

How to Disable Text Selection Using Javascript or CSS

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable text selection using javascript or CSS. It is very common these days that people are stealing text content from other websites and posting it on their websites. Such a thing is also known as plagiarism.

Currently, there is no solution for such a problem apart from sending a DMCA takedown notice to such miscreants. As web developers, we can add an additional layer of protection to our content by disabling the text selection.

In the web development world, we have 2 simplest methods to achieve this. One is using javascript and another one is using CSS. The javascript approach will fail if a user has disabled javascript in the browser. CSS approach is evergreen and it will work no matter what without any issue.

So CSS is my recommended way of approach to achieve something like this. But just for the sake of learning purposes, I have covered both methods in this tutorial. In case of CSS, we can make use of the user-select property to disable text selection.

In case of javascript, selectstart event gets triggered when a user performs text selection. We can use this event to prevent text selection.

In the following example, we have 2 paragraph elements. The text selection is disabled for both paragraphs. One is done using CSS and another one is done using javascript. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and p). The div element is just a wrapper for the rest of the elements.

The first paragraph element has class unselectable and as you can see, we are disabling text selection by setting property user-select to none.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        
        <p class="unselectable">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, voluptate quia nam exercitationem perspiciatis pariatur numquam atque illo vero eius dolor iure nemo modi, et inventore cupiditate in quibusdam. Quidem.</p>

        <p id="test">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, voluptate quia nam exercitationem perspiciatis pariatur numquam atque illo vero eius dolor iure nemo modi, et inventore cupiditate in quibusdam. Quidem.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

div {
    text-align: center;
}

p {
    width: 50%;
    display: inline-block;
    padding: 10px;
    border: 1px solid black;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

Javascript

We have selected the second paragraph element using document.querySelector() method and attached a selectstart event listener.
In the event handler function, we are simply calling preventDefault() method of the event object. This will prevent the default behavior of the event which is text selection.

document.querySelector('#test').addEventListener('selectstart', (e) => {
    e.preventDefault();
})

You May Also Like: