使文本不可复制HTML

概述这不是上述问题的重复 我在我的网站上使用了材料图标.为了添加图标,你必须做这样的事情： <p class="material-icons">info_outline</p> 如果我现在复制该图标,它将复制文本“info_outline”.我知道你可以使用user-select：none来使元素无法选择;在你的内心,但有一个问题. 以我的片段为例.如果我创建一个p元素,其中span包含user-se 这不是上述问题的重复

我在我的网站上使用了材料图标.为了添加图标,你必须做这样的事情：

<p >info_outline</p>

如果我现在复制该图标,它将复制文本“info_outline”.我知道你可以使用user-select：none来使元素无法选择;在你的内心,但有一个问题.

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

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的元素;

解决方法 首先使元素无法选择：

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

这已经适用于firefox.要使其在其他浏览器中工作,您必须使用伪元素和数据属性.

使用这样的数据属性：

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

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

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

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

总结

以上是内存溢出为你收集整理的使文本不可复制HTML全部内容，希望文章能够帮你解决使文本不可复制HTML所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。