Make text not copyable HTML

Question

This is not a duplicate of the question above

I use material-icons on my website. In order to add an icon, you'd have to make something like this:

<p class="material-icons">info_outline</p>

If I now copy that icon, it would copy the text "info_outline". I know you can make an element unselectable using user-select: none; inside you css, but there is a problem with that.

Take my snippet for example. If I create an p element, with a span inside which has user-select: none; you won't be able to select (and therefor copy) the span. However, if you copy the whole p element, you will still get the contents of the span. How can I prevent this from happening?

span {
  user-select: none;
}

input {
  width: 100%;
}

<p>Copy this text with a <span>unselectable</span> piece of text... Or is it?</p>
<input type="text" placeholder="Past text here">

Edit: Since a lot of people say it's a duplicate question to the questions where the answer is user-select: none;, just take another look at my question.

I know how user-select works! I know you can make a element unselectable. However, if you select the element around it and copy it's contents, it will copy all it's content, even the element with the user-select: none;

See answer here....http://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable — Nitin Dhomse, Apr 04 '17 at 09:48
Possible duplicate of [How to disable text selection highlighting using CSS?](http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css) — mayersdesign, Apr 04 '17 at 09:49
This [jsfiddle](https://jsfiddle.net/6ppm9jt5/) works for me in FF52. — Huelfe, Apr 04 '17 at 09:56
But maybe this [jsfiddle](https://jsfiddle.net/6ppm9jt5/1/) will help you? — Huelfe, Apr 04 '17 at 10:12
Mr Lister there is no problem with the selector. He wants to be able to select the content of `p`. And if he makes a copy of the selected text, he don't want to get the content of the `span` inside of `p`. — Huelfe, Apr 04 '17 at 10:21
Finally someone understands the question. Thank you for being the only one to actually read my question — FlorisdG, Apr 04 '17 at 11:26
You're welcome! :) I can't find a way to get it work in IE. But my second fiddle works in chrome, firefox and opera. Safari should also work. — Huelfe, Apr 04 '17 at 11:35
Oh, the fiddle does work now for me. IE doesn't work indeed, Edge does work though so that's not a problem. If you make a answer, I'll set is as the answer. Internet explorer doesn't have to be supported by web developers anymore, right? — FlorisdG, Apr 04 '17 at 11:37
@VellosFree Sorry, but I really didn't read from the question that you did want the p to be selectable, except for the span. — Mr Lister, Apr 04 '17 at 12:02

score 16 · Accepted Answer · answered Apr 04 '17 at 12:03

First of all make the element unselectable:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

This already works in Firefox. To get it work in other browsers, you have to work with pseudo-elements and data-attribute.

Use a data-attribute like this:

<span data-unselectable="unselectable content"></span>

Now we can add this text in the content of our pseudo-element ::before or ::after:

span::before {
  content: attr(data-unselectable);
}

This works because the dom will not be updated by the content attribute.

score 2 · Answer 2 · answered Apr 04 '17 at 09:49

Add css style

.youClass {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Or if you want make it better use script some thing like this.

<script>
            window.onload = function() {
                var labels = document.getElementsByTagName('label');
                for (var i = 0; i < labels.length; i++) {
                    disableSelection(labels[i]);
                }
            };
            function disableSelection(element) {
                if (typeof element.onselectstart != 'undefined') {
                    element.onselectstart = function() { return false; };
                } else if (typeof element.style.MozUserSelect != 'undefined') {
                    element.style.MozUserSelect = 'none';
                } else {
                    element.onmousedown = function() { return false; };
                }
            }
        </script>

The problem isn't making the element unselectable. The problem is, if I copy the element around it, it shouldn't copy the contents of the unselectable element. Look at my question before answering. — FlorisdG, Apr 04 '17 at 09:51

Make text not copyable HTML

2 Answers2