1

I have the following HTML/CSS code:

#not_selectable {
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>

<p id="not_selectable">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>

<p>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>

I added some CSS to the second line with the B's, so you aren't able to copy or even select it. Try it out: You can select and copy the A's and you can select and copy the C's, but you cannot select or copy the B's.

But, now try so copy the A's as well as the C's as the same time: Select all text. You'll see, the B's won't get selected. Now, copy that and paste it somewhere. In the pasted snipped, you'll also find the B's.

Is there a way to make the B's non-copyable?

EDIT: I just noticed this strange behavior only occurs on Macs Safari browser. With Firefox and Chrome on my Mac it works as expected.

David
  • 2,898
  • 3
  • 21
  • 57
  • Maybe have you ever red this topic https://stackoverflow.com/questions/44200962/how-to-disable-copy-for-particular-element-in-html ? – GregThB Jul 22 '22 at 06:53
  • I'm using FF 102.0.1 on Win10 ... if I copy the whole block from A to C, the selection will include only the lines A and C (skipping the B line) and if I paste that text somewhere, it will paste only the selected part without including the B line. Maybe it's a combination of your Browser+OS in your client test. – Diego D Jul 22 '22 at 06:57
  • I don't know why, but it's working or me, when I select A's to C's, it doesn't select B's and it doesn't copy it as well. When I paste it just paste A's + 2 empty line + C's ( I'm using chrome ) – nem0z Jul 22 '22 at 06:59
  • 1
    Please see my updated question. This behavior only seems to occur on Safari. – David Jul 22 '22 at 07:01

1 Answers1

0

if CSS related code is creating problem then add some little JS. Add eventListeners to the p. See if it works.

#not_selectable {
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>

<p id="not_selectable" onselectstart="return false" onpaste="return false;" onoopy="return false" oncut="return false" ondrag="return false">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>

<p>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>
Extraterrestrial
  • 600
  • 1
  • 6
  • 19
  • It's still the same with your code. – David Jul 24 '22 at 08:55
  • I am using Windows Chrome. So I haven't checked if it is work's on safari. But Still It seems like a bug. See here in SO Answer [https://stackoverflow.com/questions/16930542/does-safari-handle-the-paste-event-correctly] – Extraterrestrial Jul 24 '22 at 09:23