Not allow user to select part of webpage

Question

I hava a list for name, it can click to show detail of each.But I don't want names of that list be select and copy.It just a protect.How to do?

can put a transparent layer on it, or use onselectstart event,but not good

You can't avoid advanced users to look at the code and copy it from there, but you can disable the right click, copy options, selection of text etc... http://stackoverflow.com/questions/9958478/how-to-disable-copy-paste-browser — Hanlet Escaño, Aug 16 '13 at 08:10
@NileshThakkar: I could definitely tell, but I didn't do any downvote :). — 0xc0de, Aug 16 '13 at 11:29
@NileshThakkar: by 'here' `@0xc0de` means 'present' or 'indahouse' :-) — David-SkyMesh, Aug 17 '13 at 14:35

Rich Bradshaw · Answer 1 · 2013-08-16T08:34:30.717

1

With this CSS

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

And this HTML

<body>
  <p class="unselectable">The user is not able to select this text in Firefox, Chrome, Safari and IE.</p>

</body>

The paragraph can't be selected.

It's nice for buttons and things where the text is not useful to copy and paste.

This can't be considered security, as the user can obviously disable the CSS or just view source. (Or use wget/curl/raw sockets to get the content).

Browser support is pretty good: http://caniuse.com/user-select-none

IE10 and up (though of course IE10 is now the most popular version of IE), + all other browsers.

If for some reason you are supporting older versions of IE with such a trivial feature, you can add unselectable="on" on the element.

edited Aug 16 '13 at 08:34

answered Aug 16 '13 at 08:11

Rich Bradshaw

71,795
44
182
241

Most of recent browser which supports standard CSS3 spec: Chrome, Firefox 5+, IE 10+ I guess. – Maxime Lorant Aug 16 '13 at 08:17
Please don't feed the trolls. – David-SkyMesh Aug 16 '13 at 08:22
If I need to compatible IE6-9? – MarioDu Aug 16 '13 at 08:22
@MarioDu doesn't take no for an answer. It's pointless to answer his questions. – David-SkyMesh Aug 17 '13 at 12:55
If you read my answer, this does work by using `unselectable="on"` in older versions of IE. – Rich Bradshaw Aug 17 '13 at 13:05

score 1 · Answer 2 · edited May 23 '17 at 10:28

If it's just for esthetic because you need some action in Javascript which make weird thing with the selection, you can disabled the user selection by this CSS property:

.block {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

However, the user will always be able to select the content by an other manner: source code, by deactivate the CSS, save the page on his disk, etc. You can't protect your data from being copy on the Internet. If you want to keep it for you only, don't share it on the Web :) See also this post which explains the subject for another problem.

score 0 · Answer 3 · answered Aug 16 '13 at 08:11

When you want to protect information, don't put it on the internet - simple as that.

That being said, one way to make text less machine-readable would be to turn it into an image. But it would still be possible to extract the text using optical character recognition. Obfuscating the text like in a captcha could make this harder, but 1. still not impossible (breaking captchas is a well-researched field) and 2. make the user-experience worse, especially for vision-impaired people.

score 0 · Answer 4 · answered Aug 16 '13 at 08:13

0

Well you can disable right click on page using JavaScript but it won't prevent user from copying content from your website.

There are still other options to copy content:

Print Screen OR any other snipping tool
Save page
Print Screen and extract text using Microsoft One Note.
View page source and copy

If you put something on Internet, there are chances of getting it copied. You can prevent normal users from copying using JavaScript and other measurements but advanced user will copy it any way.

answered Aug 16 '13 at 08:13

Nilesh Thakkar

2,877
1
24
43

2

I think the author isn't happy that we teach him how works the web :( (But, I have a +1 for giving him a CSS method, youpi \o/) – Maxime Lorant Aug 16 '13 at 08:18
1

@MaximeLorant Yes, it seems he wants the solution anyway which in reality wouldn't be a solution at all. – Nilesh Thakkar Aug 16 '13 at 08:22
Not whole page, just a part of it.I just prevent some primary pc user – MarioDu Aug 16 '13 at 08:24
In reality if you take any measure to prevent user from copying, you may succeed in doing so at the cost of User Experience. Think twice. – Nilesh Thakkar Aug 16 '13 at 08:26

score 0 · Answer 5 · answered Aug 16 '13 at 08:25

you can try to render all texts as images, no one can stop them using print screen but at least there will be no copying. see imagettftext (http://php.net/manual/en/function.imagettftext.php) or http://sgss.co/previous/experiments/phpfontimagegenerator2/

or just google some more methods of rendering text as image.

score -1 · Answer 6 · answered Aug 16 '13 at 08:05

-1

You can't. Don't try.

If the user can see it, they can copy it (somehow).

answered Aug 16 '13 at 08:05

David-SkyMesh

5,041
1
31
38

Not allow user to select part of webpage

6 Answers6