I have the following:
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;">Harvard</span>
<span>John Smith</span>
</span>
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;">Chicago</span>
<span>Tucker Max</span>
</span>
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;"></span>
<span>Rihanna</span>
</span>
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;">NYU</span>
<span>Peter Simpson</span>
</span>
CSS:
.noselect{
-webkit-user-select: none !important; /* Chrome 49+ */
user-select: none !important; /* Likely future */
}
Now I disabled selectability for the spans
with the universities. This works. However, when I select a user or even multiple users, and then copy paste this to somewhere else, the Universities are also being copied.
How can I disable this? I would like the user to not be able to copy the university names, but only the names of the users.This would also make sense, since only the users are selectable for the user anyways.
Other than HTML & CSS I am using React
& electron
, if this should be of any help. This is why I am only targeting chrome, and not ff or ie etc.
PS: The solution of this "possible duplicate" does not work for me. My text is not selectable, yet when I paste it, there is more text than I saw I had selected.