使文本不可复制HTML

Question

这不是上述问题的重复

我material-icons在我的网站上使用.为了添加图标,你必须做这样的事情:

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

如果我现在复制该图标,它将复制文本"info_outline".我知道你可以user-select: none;在你里面使用一个不可选择的元素css,但是有一个问题.

以我的片段为例.如果我创建一个p元素,span内部有一个元素,user-select: none;你将无法选择(并因此复制)跨度.但是,如果您复制整个p元素,您仍将获得该元素的内容span.我怎样才能防止这种情况发生？

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">

编辑: 由于很多人都说答案是问题的重复问题,所以user-select: none;再看看我的问题.

我知道用户选择如何工作!我知道你可以让一个元素无法选择.但是,如果你选择它周围的元素并复制它的内容,它将复制它的所有内容,甚至是复制它的元素.user-select: none;

Answer 1

首先使元素无法选择:

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

这已经适用于Firefox.要让它在其他浏览器中运行,您必须使用pseudo-elements和data-attribute.

使用data-attribute这样的:

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

现在我们可以在伪元素的内容中添加此文本::before或::after:

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

这是有效的,因为dom内容属性不会更新.