Unselectable and uncopyable text HTML

Question

This is my attempt below,

/* css */
.unhighlightable-text {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* html */
<div> first </div>
<div class='unhighlightable-text'> second </div> 
<div> third </div>

This works as intended VISUALLY: JSfiddle However if you actually go and copy paste all three divs, 'second' always gets copied.

I looked at Making line numbers uncopyable. But it requires using CSS generated counter to resolve the issue. In my case, the uncopyable portion is generated using JS.

Is there a way to create unselectable and uncopyable text in html without using javascript or restructuring the dom?

Edit

As to why I'm doing this, here is my use case: I have dynamically generated rows of content that I render incrementally. Each row has 2 inline-block divs, the first div contains meta-information, the second div contains useful content. If the user only wants to copy the useful content (which is a frequent usecase), then they will end up copying the first div as well. Since these rows are dynamically rendered (I'm using EmberJS and ember-collection), I can't use a table view and am forced have each row be self-contained.

The question that's important to ask at this point is: why do you want to do that? — zzzzBov, Apr 12 '16 at 19:30
OK, fair enough … Perhaps you could try and implement a “copy mode”, in which by a click of a button or a checkbox the first column of each row gets hidden via `display:none` …? I think several pastebin-like sites use this technique, to allow copying of code snippets with or without line numbers. — CBroe, Apr 12 '16 at 19:42
@CBroe, this question is an [XY Problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) then. The appropriate way to allow a user to select and copy text is to provide them with a [readonly textarea (or similar) that auto-selects its contents when focused](http://codepen.io/zzzzBov/pen/qdXbrK). — zzzzBov, Apr 12 '16 at 20:20
@zzzzBov: Especially those I usually find _incredibly annoying_, if I want to copy _part_ of the text only – in most implementations I’ve seen so far any click inside the textarea focuses the whole content again, which makes copying only part of it impossible. (Yours doesn’t, so that’s good.) — CBroe, Apr 12 '16 at 20:25
@CBroe, whoops, i just realized I directed my comment at you instead of OP. little late to fix now. And you're right about selection on click being annoying. It's super important to toggle when it's *focused* and allow the user to change the selection after initial focus. — zzzzBov, Apr 12 '16 at 20:26

score 3 · Accepted Answer · 2016-04-12T20:53:09.193

3

::before content will be both unselectable and uncopyable.

[data-content]::before {
  content: attr(data-content); 
}

<div> first </div>
<div data-content='second'></div>
<div> third </div>

edited Apr 12 '16 at 20:53

answered Apr 12 '16 at 19:37

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

Depending on which browsers you have to support, you could simply give them a button on each row that copies the useful content to their clipboard.

Here's a good post on it: https://stackoverflow.com/a/30810322/1159067

edited May 23 '17 at 11:46

Community

1
1

answered Apr 12 '16 at 19:57

Elliott

2,035
20
23

Unselectable and uncopyable text HTML

2 Answers2

Linked