如何防止用户使用 CSS 复制某个 div 的文本？

Posted 2023-03-06

【中文标题】如何防止用户使用 CSS 复制某个 div 的文本？

【英文标题】：How to prevent user copying text of a certain div using CSS?

【发布时间】：2015-01-16 10:42:18

【问题描述】：

我知道可以使用下面的 CSS 来禁用用户文本选择。

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

但是当我有以下html时：

<p>selectable text 1</p>
<p class="unselectable">unselectable text</p>
<p>selectable text 2</p>

用户仍然可以通过从页面的最顶部（可选文本 1）选择到页面的最底部（可选文本 2）来复制不可选择的文本。有什么方法可以防止吗？谢谢。

【问题讨论】：

代码似乎对我很有效。我试图复制您的场景，但无法选择不可选择的文本。

您能否提供您的浏览器详细信息，或者附上您的问题的屏幕截图以及所选文本？

其实我的意思是复制文本，而不是文本选择。不知道我为什么写这个。你可以在jsfiddle.net/gtb74zqj 上看到。当我选择整个结果区域并按 Ctrl + C 时，我可以复制所有三行文本。我在 Windows Vista 上使用 Chrome。

Duplicate *** Question

【参考方案1】：

问题似乎很模糊。

HTML页面上的“Selection”和“Copying”是有区别的。您可以使用CSS阻止“Selection”，但不能阻止“Copying”使用 CSS。你需要 JS。

【讨论】：

勾选此项以禁用文本复制***.com/questions/737022/…

【参考方案2】：

你只需给它一个 div 包装器并定义 id 选择器来做你想做的事情Correct way to do a css wrapper