Make Text Unselectable And Uncopyable (webkit, While Surrounded By Copyable Text)

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 ther

Solution 1:

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 <spandata-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.

Solution 2:

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;
}

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

Solution 3:

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.

functiongetSelectedText() {
  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 <spanclass="hide"unselectable="on">but I'm not</span> You can select me all day!</div>