新答案

Question

在有人建议之前：不，user-select isn't the correct answer。

Daniel O'Connor的pure CSS method已接近但我不能将它用于我的用例，因为那些“辅助功能问题”。

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

修改

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

编辑2

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

Answer 1

新答案

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

我知道两个解决方案：

将文字放在不同的父元素
在用户开始选择时隐藏不需要的元素

解决方案＃1通常用于带行号的源代码。通过巧妙地应用CSS，两个DIV垂直对齐，这样每个行号看起来都在正确的源代码行的左边（实际上是在不同的DIV中）。

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

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

这种方法的优点是用户可以看到他们正在复制的内容（即不需要的信息正在消失）。

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

这种方法的一个变体是使用绝对定位使元素出现在某个地方。如果您必须将此技术应用于aHIDEb之类的内容，则会很快变得乏味 - 您必须在a和b之间放置足够的空白区域以在它们之间显示HIDE ，然后将HIDE像素完美地放在间隙中。并非不可能，但我会先尝试重新安排信息。

旧答案

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

不显示
使用密码字段

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

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

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

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

Answer 2

如果有人仍在寻找防止复制不重要元素（如行号）的方法，答案是使用伪元素：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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

修改

编辑2

2 个答案:

新答案

旧答案