Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable copying in a div?

Tags:

html

jquery

css

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>
like image 383
AnchovyLegend Avatar asked May 27 '12 20:05

AnchovyLegend


1 Answers

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/

like image 75
Rich Bradshaw Avatar answered Sep 21 '22 00:09

Rich Bradshaw