Make all text EXCEPT unselectable in Internet Explorer?

Question

I have a website where I want to disable users from selecting content EXCEPT for input areas. I currently have some CSS to disable user-select:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

However, this does NOT cover Internet Explorer; thus, I need to implement some JavaScript:

<body onselectstart="return false;">

Through CSS and JavaScript, I can make all content unselectable across all popular browsers. BUT, this code also makes areas unselectable, which is a major case of poor usability. I use CSS to make input areas selectable:

-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text; 
user-select: text;

.. and as you might have expected, this does not cover Internet Explorer, since I used JavaScript to disable all content from being selectable.

What can I do to make all content unselectable except for input areas?

No answer, only a question occurs to me - _Why in the world would you do that?_ Not for "security". That's just going to annoy me and then I'll **Ctrl+U** to view source and copy from there instead. — Stephen P, Nov 16 '11 at 01:57
possible duplicate http://stackoverflow.com/questions/4448671/making-things-unselectable-in-ie — joshuahedlund, Nov 16 '11 at 14:07

score 3 · Accepted Answer · answered Nov 16 '11 at 15:01

3

Since the event is bubbling up to the body and not originating there, I think you can check the node name for the actual target node, and avoid returning false for events occurring on certain nodes:

<body onselectstart="if ((event.target || event.srcElement).nodeName !== 'INPUT') return false;">

answered Nov 16 '11 at 15:01

James Clark

1,765
13
17

This is the approach I went with; it was very straightforward. Thanks! – Ashli Aug 14 '12 at 18:23

score 2 · Answer 2 · answered Nov 16 '11 at 01:39

2

Try this one: oncontextmenu="return false;"

Put that in your body tag, then use something like:

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

in a javascript function for the input items you want selectable. That should stop the propagation of the event that would trigger the body tag.

answered Nov 16 '11 at 01:39

user978122

5,531
7
33
41

Of course, this solution is assuming that JavaScript is turned on in the browser. – JasCav Nov 16 '11 at 01:46

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

You can add the proprietary IE attribute unselectable="on" to any element that you want to make unselectable in IE:

<p unselectable="on">I don't want IE users to easily select this text 
  for some reason.</p>

See Making things unselectable in IE for a more detailed explanation.

If doing this from javascript, be sure to use el.setAttribute("unselectable","on"). Just using el.unselectable="on" will not work.

edited May 23 '17 at 12:22

Community

1
1

answered Nov 16 '11 at 14:06

joshuahedlund

1,722
2
20
25

This is a great idea for particular elements. However, I'd love to apply this to all elements. – Ashli Aug 14 '12 at 18:20

Make all text EXCEPT unselectable in Internet Explorer?

3 Answers3

Linked