6

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

I have been to website's where if I try to highlight or copy some of the text, I am unable to. I was wondering if anyone knows how I would achieve 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>
AnchovyLegend
  • 12,139
  • 38
  • 147
  • 231

3 Answers3

12

Using just CSS you can use user-select like so:

-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 up, but not in Opera.

This simply stops a user selecting the text, but that will prevent them copying it. It's nice for text on buttons as well.

In older IE and Opera, you can set it to be unselectable either by using:

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

in JS, or simply adding the unselectable attribute and setting it to on.

Here's an example: http://jsfiddle.net/B9yYt/

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • 1
    +1 for suggesting its use on buttons; imo very few other areas would be appropriate – Oleg May 27 '12 at 21:44
  • 1
    Yes, I've only used in on buttons. Being able to copy/paste and hence quote pages is a good thing IMO! – Rich Bradshaw May 28 '12 at 08:19
  • @RichBradshaw, it works. But if there are other div above and below this this. And I copy from the div above, through this unselectable, and towards the div below, I can still copy the content.. – user2335065 Sep 10 '15 at 07:51
1

You could add a div above your content like this:

<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>
  • I could copy it... just need to play with it a bit. – gdoron May 27 '12 at 21:55
  • Of course. MHZ's goal is completely unrealistic. I'm just giving an answer to the question. –  May 27 '12 at 23:03
  • Thanks for the attempt. Your solution fails to solve my problem. Just because you don't know the solution, does not mean my goal is unrealistic. Please look at the best answer to see how realistic my goal is;) – AnchovyLegend May 29 '12 at 17:59
  • I do know the solution; which is why I answered the question. Your goal, as I understand it, is to "disable copying text from a div". I'm glad for your question and chosen answer, though. It's a lot more elegant than my solution. –  May 29 '12 at 18:09
0

It's not JavaScript - but you can make something 'appear' disabled to selection by using CSS.

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

Keep in mind this isn't cross-browser compatible.

ahren
  • 16,803
  • 5
  • 50
  • 70