Make text unselectable and uncopyable (webkit, while surrounded by copyable text)

Question

The following snippet shows how to make text unselectable. Sadly, if you select text on either side in Chrome, when you copy and paste the unselected text also gets pasted.

Is there any way to have a lot of writing, with unselectable content throughout, that you can copy and paste and none of the unselectable content is pasted?

.hide {
  color: orange;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div>Hello this text is selectable <span class="hide">but I'm not</span> You can select me all day!</div>

http://codepen.io/regan-ryan/pen/XdodGx

edit: This question does seem like a possible duplicate, seeing there are something like 12 questions already on this topic. However, I couldn't find my particular problem after extensive searching, so I thought it merits it's own question with a more particular question title.

Possible duplicate of [Unselectable and uncopyable text HTML](http://stackoverflow.com/questions/36582291/unselectable-and-uncopyable-text-html) — , May 04 '16 at 14:06

score 25 · Accepted Answer · edited May 23 '17 at 11:55

25

More a workaround: you can exploit fact, that CSS generated content is invisible for clipboard (*), so with empty span with text moved to some attribute you have visually similar result with requested clibpoard behaviour:

[data-text] {
  color: orange;
}
[data-text]::after {
  content: attr(data-text);
}

<div>Hello this text is selectable <span data-text="but I'm not"></span> You can select me all day!</div>

http://codepen.io/myf/pen/jqXrNZ

If accessibility / SEO is not a concern, this could be the solution. In other case, it could be real text in HTML but moved to attribute with script 'on demand'.

(*) Update: as noted in comment ( How to disable text selection highlighting using CSS? ) Internet explorer actually involves CSS generated content in clipboard. Argh.

edited May 23 '17 at 11:55

Community

1
1

answered May 04 '16 at 12:28

myf

9,874
2
37
49

This works great! My content was being generated dynamically, so I ended up have a regex parse 3 groups, before-(no copy)-after. I then ran this JS line `line = line.replace(spacerTextRegex, "$1$3");` – Mirror318 Dec 21 '17 at 01:48
Putting text using CSS is a bad accessibility practice. Screen readers can't read this text. – Sylvain DNS Jun 10 '21 at 09:56
@SylvainDNS Accessibility is a good point, but as far as I know, at least more recent screen readers parse and read CSS generated content quite well, considering it can be used as aid (see for example: https://adrianroselli.com/2017/12/tweaking-text-level-styles.html). – myf Jun 10 '21 at 10:09

score 2 · Answer 2 · edited May 04 '16 at 12:26

css can disable selection highlight but if you want use not to copy the text use this small piece of jquery code

$('.hide').on('copy paste cut drag drop', function (e) {
   e.preventDefault();
});

$('.hide').on('copy paste cut drag drop', function (e) {
       e.preventDefault();
    });

.hide {
  color: orange;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello this text is selectable <span class="hide">but I'm not</span> You can select me all day!</div>

This works well in Firefox but does not seem to be working in Chrome. — myf, May 04 '16 at 12:41

score 2 · Answer 3 · answered May 04 '16 at 12:46

You can try to read the highlighted text with window.getSelection. Please try the following code example and look into the console. With this, you can remove the unwanted text from the string and copy it to the clipboard. But this isn't very simple, maybe not even possible. This is just an idea.

function getSelectedText() {
  console.log(window.getSelection());
}

document.onmouseup = getSelectedText;
document.onkeyup = getSelectedText;

.hide {
  color: orange;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
<!-- begin snippet: js hide: false -->

<div>Hello this text is selectable <span class="hide" unselectable="on">but I'm not</span> You can select me all day!</div>

looks unselectable, but I can still copy paste it with Chrome — Mirror318, Dec 21 '17 at 01:45

score 0 · Answer 4 · answered Feb 01 '22 at 09:46

0

Use user-select: none; in style attribute or use in a css file.

answered Feb 01 '22 at 09:46

SAKIB

475
5
7

Make text unselectable and uncopyable (webkit, while surrounded by copyable text)

4 Answers4

Linked

Related