1

I am developing an html page that displays results for a given question.

I want people to be able to copy paste at their will, if they wish. Part of the text though is not useful. It's only comments about the results. I want to avoid that text from being copied. Only to facilitate work and not to hide or protect it.

I've seen other questions on SO like Prevent copying text in web-page But these focus more on either protecting full pages or large areas of text from being copied. I want to avoid only small portions within copiable html.

How can I achieve a clean copy paste from text in an html page avoiding unnecessary content?

nsn
  • 193
  • 10

1 Answers1

1

You can use pseudo element in order to show content that we cannot copy/paste:

div::after {
  content:attr(data-comments);
}
<div data-comments="comments that cannot copy paste">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus. Fusce in egestas ex. Etiam tincidunt lacus sit amet lorem rutrum mollis ac pellentesque ligula.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus.
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks. I will try that. Can you put html there? – nsn Jan 01 '19 at 22:59
  • @nsn it depends on the HTML you want but you can always style the pseudo element like any html element – Temani Afif Jan 01 '19 at 23:01
  • It's a bit complex. I want to add a couple of html tags/data, some hidden. These would be opened on mouse over. For simple text, your solution is very nice. For more complex setups, it might not be enough (or it becomes ugly). – nsn Jan 03 '19 at 08:59
  • @nsn Did you come up with a better solution for more complex setups? – flackbash Apr 19 '23 at 14:15