CSS & jQuery – How to Disable Text Selection Highlighting?

In some cases, we don’t want others to copy selected text. To prevent text on a webpage we can opt for CSS, Pure JavaScript or jQuery solution. We will discuss one by one.

Let’s start…

CSS Method

We can disable text selection using some CSS styling, user-select solves the purpose.

Now this class disable-select will prevent text selection having user-select:none property

How to select all text on click?

We can also enable select all text on click on the text.


JavaScript Method

If you want to go for JavaScript method, then you need to add unselectable attribute set to on, then add a style of user-select to none. Here are also overriding dragstart and selectstart event to false

Or Other JS Method

This method will simply add onselectstart then set to return false

jQuery Method

If the application is already using the jQuery library then we can also opt for a jQuery method for ease.

JavaScrip and jQuery method will also work in older versions of IE.

Leave a Reply

Notify of