Clever Geek Handbook

How can I prevent the user from copying the text of a specific div using CSS?

I know the below CSS can be used to disable user text selection.

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

But when I have the following html:

<p>selectable text 1</p>
<p class="unselectable">unselectable text</p>
<p>selectable text 2</p>

Users can still copy unselected text by selecting the very top of the page (selectable text 1) to the very bottom of the page (selectable text 2). Any ways to prevent this? Thank.

+3


source to share


2 answers


The questions seem vague.



There is a difference between "Select" and "Copy" in HTML pages. You can prevent "Select" with CSS, but you cannot prevent "Copy" with CSS. You need JS for this.

+2


source


You just pass it a wrapper div and define an id selector to do what you want Correct way to create a css wrapper



0


source






More articles:


All Articles