6

Check out this snippet:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>
<p>
  Selectable text.
</p>

Now triple-click on the first row and than copy. Paste it anywhere and you'll be able to see that the "Unselectable text." gets copied as well. This happens only on Chrome. Does anyone know why this is happening and what ways there are to fix it?

Rob
  • 14,746
  • 28
  • 47
  • 65
Eshel Silberstein
  • 91
  • 7
  • 1
    I tried it in Chrome, and the second row doesn't get selected – Ammar Alyousfi Nov 12 '17 at 15:34
  • I can reproduce the problem in Chromium 57 under Debian 64 bit KDE, but since it doesn't happen everywhere (see @ammarx's comment) what version and system are you using? – Mr Lister Nov 12 '17 at 15:46
  • By the way, IE11 also copies the second line if you select text by dragging the mouse from the first to the third line. So only Mozilla has got it right. – Mr Lister Nov 12 '17 at 15:49
  • 1
    I use chrome 60 and it does happen to me, @ammarx, please notice that the second row indeed doesn't get selected, but if you copy the content from first row and paste it on your editor, you'll see that both lines got copied (line1 &line2). try to copy it by triple-click 1st line – Eshel Silberstein Nov 12 '17 at 16:03
  • [Here](https://caniuse.com/#feat=user-select-none), it is said that Chrome 60 supports `user-select: none;` – Ammar Alyousfi Nov 12 '17 at 16:09
  • However, it is `user-select: none` and not `user-copy: none`. Even if it prevents the user from copying the text, he still can do so by viewing the source of the page. – Ammar Alyousfi Nov 12 '17 at 16:14
  • @ammrax, the prevention of user copy is not for secure, is for allowing him to copy only the selectable line. I found that google has an open issue regarding to this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=147490 but still would love to know if someone has a workaround – Eshel Silberstein Nov 12 '17 at 17:05

2 Answers2

4

This should be fixed in latest chrome, but just in case, you can use pseudo elements to add text that definitely can't get selected or copied in any browser (i.e. line numbers in code listings). Here's a trick to use it for dynamic content:

.line::before {
  content: attr(data-line-number);
  margin-right: 8px;
}
<div><span class="line" data-line-number="1"></span>line 1</div>
<div><span class="line" data-line-number="2"></span>line 2</div>
<div><span class="line" data-line-number="3"></span>line 3</div>
riv
  • 6,846
  • 2
  • 34
  • 63
1

If anyone interests, adding this element after the selectable element will fix the issue:

.copy-blocker
{ position: absolute; user-select: text; height: 100%; }
<div class="copy-blocker"></div>
Eshel Silberstein
  • 91
  • 7
  • +0.5 :o) I can confirm this prevents the second paragraph from being selected and copied when you triple-click the first paragraph alone. It does not, however, prevent paragraph 2 from getting selected and copied if you manually select the whole shebang from rows 1 through 3. – agrm Nov 12 '17 at 21:44