如何防止某个元素的文本被复制到剪贴板?

问题描述 投票:2回答:2

在有人建议之前:不,user-select isn't the correct answer

Daniel O'Connor的pure CSS method很接近,但由于那些“可访问性问题”,我不能将它用于我的用例。

我需要一种更好的方法来做同样的事情。我想不出它是怎么做的;我不认为有一种可靠的跨浏览器兼容的方式使用JavaScript将内容复制到剪贴板。所以我认为它必须是HTML和CSS解决方案。

Edit

我说“我不认为有一种可靠的跨浏览器兼容方式,可以通过JavaScript将某些东西复制到剪贴板”,因为一个解决方案可能会在复制事件时被捕获(如果甚至在任何地方都支持的话)。我刚刚意识到,即使“有一种可靠的跨浏览器兼容的方式用JavaScript复制内容到剪贴板”,当用户在移动设备上复制文本时,这可能不起作用。如我错了请纠正我。

Edit 2

我不是试图阻止人们以任何方式复制文本。我不是想阻止访问文本。无论如何,这是不可能的,也是沮丧的。我只是想让那些从我的应用程序中复制N个元素文本的用户更好一些,这些文本最终会在剪贴板中显示不重要的内容(如时间戳元素的文本等)

javascript html css text copy
2个回答
4
投票

New Answer

当用户选择并复制文本时,您希望自动省略文本的某些部分。

我知道两个解决方案:

  1. 将文本放在不同的父元素中
  2. 用户开始选择时隐藏不需要的元素

解决方案#1通常用于带行号的源代码。通过巧妙地应用CSS,两个DIV垂直对齐,使得每个行号看起来都在正确的源代码行的左侧(实际上是在不同的DIV中)。

这样,您可以在源代码中拖动您的选择而不获取任何行号。这适用于可以在垂直/水平对齐的框中显示的信息,或者如果可以将内容放入不同的表格单元格中,则可以使用不同的图片。

解决方案#2响应第一次鼠标点击并将display: none应用于具有某个类的元素,如omit-during-copy

这种方法的优点是用户可以看到他们正在复制什么(即不需要的信息正在消失)。

缺点是如何/何时恢复状态。

其变体是使用绝对定位使元素出现在某个位置。如果你必须将技术应用于像aHIDEb这样的东西,这将变得很乏味 - 你必须在ab之间放置足够的空白空间以在它们之间显示HIDE,然后将HIDE像素完美地放在间隙中。并非不可能,但我会尝试重新排列信息。

Old Answer

有两种方法可以阻止用户从HTML页面复制文本:

  1. 不要显示它
  2. 使用密码字段

让我解释一下:您可以在页面本身使用JavaScript尝试少量事项。如果您吞下Ctrl + C,那么人们将使用鼠标。如果您在页面中按下鼠标按钮,它们将使用菜单栏。如果禁用浏览器的菜单栏,人们将停用“允许JavaScript隐藏菜单栏”选项。

如果您使用密码字段,人们将使用JavaScript控制台或“显示源”,或者他们将使用像Tampermonkey这样的工具来摆脱您对生活的讨厌侵扰。

您可以尝试使用文本显示图像。然后人们将使用OCR。因此,即使您使用基于Flash的HTML查看器来替换整个页面,人们仍然可以复制文本。但这会让他们非常生气。

个人注意事项:我倾向于访问那些尝试过一次这样的事情的页面。我倾向于长时间记住这些网站并且非常消极情绪。所以,如果我是你,我试着这只是为了让人们远离我的网站。


1
投票

如果有人仍在寻找防止复制不重要元素(如行号)的方法,答案是使用伪元素:

.code {
  white-space: pre;
  font-family: monospace;
  padding-left: 40px;
}
.line-number {
  position: absolute;
  left: 0;
  width: 38px;
  color: #888;
  text-align: right;
}
.line-number::before {
  content: attr(data-line-number);
}
<div class="code">
<span class="line-number" data-line-number="1"></span>const greet = () => {
<span class="line-number" data-line-number="2"></span>  console.log("Hello World!");
<span class="line-number" data-line-number="3"></span>};
</div>
© www.soinside.com 2019 - 2024. All rights reserved.