All geek questions in one place

Disable copying in div?

I was wondering if there is a way to disable copying text from a div?

I was on a website where, if I try to select or copy part of the text, I cannot. I was wondering if anyone knows how I achieved this?

<div id="description">However, this valorous visitation of a by-gone vexation, stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition. </div>
+4
source share
3 answers

Using only CSS, you can use user-select like this:

 -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;

This works in Firefox, Chrome and Safari, IE10 and higher, but not in Opera.

This simply stops the user selecting the text, but this will prevent them from being copied. This is good for button text.

In older IE and Opera, you can establish that it is not selectable using:

 var elem = document.getElementById("yourElement"); elem.unselectable = "on"; // For IE and Opera

in JS or just add an unselectable attribute and set it to turn it on.

Here is an example: http://jsfiddle.net/B9yYt/

+10
source

You can add a div above your content as follows:

 <html> <head> <style> #content{ z-index: 0; background: grey; } #overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; } </style> </head> <body> <div id="content"> <p>Can't touch this</p> </div> <div id="overlay"> </div> </body> </html>
+1
source

This is not JavaScript, but you can make something appear to be disabled for selection using CSS.

 ::-moz-selection { background: #000000; color: #ffffff; text-shadow: none; } ::selection { background: #000000; color: #ffffff; text-shadow: none; }

Remember that this is not cross browser compatible.

0
source

Source: https://habr.com/ru/post/1414636/

More articles:


All Articles