CODEWITHSUNDEEP
javascripthtmlcss
Prashanth Palaniswamy
Prashanth Palaniswamy

Reputation: 352

How to prevent user from selecting and copying text from my webpage

I know that we can use javascript to achieve this but disabling the javascript in the web browser, user can easily copy text. Is there any way for this using CSS?

Upvotes: 3

Views: 19954

Answers (8)

Satya Pendem
Satya Pendem

Reputation: 325

-webkit-touch-callout: none; ;
-webkit-user-select: none;
-khtml-user-select: none; 
-moz-user-select: none;
-ms-user-select: none; 
user-select: none;

The text won't be selected but, We can copy the text in some cases.

Upvotes: -1

nomis
nomis

Reputation: 1574

What your client, and many others, are looking for is not possible, because they don't understand how web pages are transmitted, but, these clients will probably be happy with making it "difficult" for a user to copy the text. There are other use-cases where text that could be marked as not copyable would be a useful feature, for example, you want to make it easy for a user to copy some text without copying something that makes no sense to copy, like metadata, for example a time stamp.

As far as the previous answers, they seem to indicate the way to do this with css is with the user-select css property, however, this keeps the text from appearing to be selected, but it will still copy to the clipboard. However, that is the best you will get with css alone and might dissuade some users from copying your content.

Javascript will take it one step further and make it difficult to copy from the browser window without using developer tools.

Upvotes: 1

Leiko
Leiko

Reputation: 952

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

This is a good way to prevent user from selecting text. And this is not a bad answer. For instance, if you work on a website that uses Canvas (HTML5) and allows users to drag'n'drop stuff on this canvas; if the user is going out of canvas defined zone, text will start to get 'selected'. Which is ugly. So for obvious ergonomic reasons, this is a good way to go.

Upvotes: 1

Madara's Ghost
Madara's Ghost

Reputation: 174947

If you don't want someone copying your text, don't place it on the web.

The web's source is visible, free to read, and to copy.

Even with all the CSS, JavaScript or imagary tricks you may pull off, nothing will prevent a user from manually reading and copying your text to a different document/location.

The best you can probably hope to do is to annoy people enough to discourage them from copying your text. But like all other things, someone persistent would be able to pull it off.

That's what us humans do.

Upvotes: 35

GordonM
GordonM

Reputation: 31730

There's no way to stop someone sufficiently determined from copying the text of your website. Even if there was some hypothetical perfect way of blocking copying and pasting or downloading the pages to only be viewed and not saved (which there isn't), someone with enough time and motivation can just type out the text by hand if they really wanted it.

The web is designed to be open. And a good thing that it is too. Extracting the data from a web page authored in 1991 isn't particularly difficult. Try doing the same thing with a Microsoft Word document from the same era without using a Microsoft product.

Upvotes: 9

Rickzin Pema
Rickzin Pema

Reputation: 334

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Upvotes: 13

CSS Guy
CSS Guy

Reputation: 1984

The web is open source, free to read, there is no way to warn people to copy content even with java script but you can warn via CSS. trick like below.

Try this...

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

Upvotes: 2

Macros
Macros

Reputation: 7119

Similar question here with some good answers so I won't cover old ground

Whatever you do, the user is still going to be able to view the source of the page and copy anything from there. The only way to totally prevent it is not to display any text at all (e.g. display an image, or dynamically create an image which isn't great for accessibility)

Upvotes: 6

Related Questions