<div id="mydiv" unselectable="on" onselectstart="return false">
Wanna copy this?
</div>
Yes, it sounds so easy, that must be too good to be true. And indeed,
when I start my selection outside the unselectable div, but happen to
pass it as I mouse to the other end of the page, then it still ends up
being highlighted together with the rest I have selected. As if
'unselectable' is only truly unselectable if applied to the whole
document!
I have been looking very hard for a workaround, because if I print my
PHP code with linenumbers, the linenumbers should not be copied if I
want some code.
Using an ordered list which prints an unselectable number in front of
every line is not a solution here, because I am going to show and hide
lines dynamically and want to keep the index.
I have tried putting the linenumbers in little input fields and all
sorts of tags, with all sorts of attributes. But even with
"display:none", the element ends up on my clipboard...
The solution I currently employ, is to temporarily remove the
linenumbers altogether if a selection is being made, but there must be
a better and more elegant way...
Code with linenumbers is one example. There may be other compelling
reasons why text should not be selectable, even when next to text that
should be. The unselectable attribute should be renamed, it doesn't
live up to its promise.
I am sure I am not first one who has a problem with this, and I would
be very interested to hear of any solutions that have been thought up.