Menu
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?
527
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;">
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
