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 an element unelectable. 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 20 · 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 3 · 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