CODEWITHSUNDEEP
jqueryhtmlcss
AnchovyLegend
AnchovyLegend

Reputation: 12538

Disable copying in a div?

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>

Upvotes: 6

Views: 9600

Answers (3)

Rich Bradshaw
Rich Bradshaw

Reputation: 73045

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/

Upvotes: 12

user336063
user336063

Reputation:

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>

Upvotes: 1

ahren
ahren

Reputation: 16959

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.

Upvotes: 0

Related Questions