如何防止某个元素的文本被复制到剪贴板？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何防止某个元素的文本被复制到剪贴板？相关的知识，希望对你有一定的参考价值。
在有人建议之前：不，user-select isn't the correct answer。
Daniel O'Connor的pure CSS method很接近，但由于那些“可访问性问题”，我不能将它用于我的用例。
我需要一种更好的方法来做同样的事情。我想不出它是怎么做的;我不认为有一种可靠的跨浏览器兼容的方式使用javascript将内容复制到剪贴板。所以我认为它必须是html和CSS解决方案。
Edit
我说“我不认为有一种可靠的跨浏览器兼容方式，可以通过JavaScript将某些东西复制到剪贴板”，因为一个解决方案可能会在复制事件时被捕获（如果甚至在任何地方都支持的话）。我刚刚意识到，即使“有一种可靠的跨浏览器兼容的方式用JavaScript复制内容到剪贴板”，当用户在移动设备上复制文本时，这可能不起作用。如我错了请纠正我。
Edit 2
我不是试图阻止人们以任何方式复制文本。我不是想阻止访问文本。无论如何，这是不可能的，也是沮丧的。我只是想让那些从我的应用程序中复制N个元素文本的用户更好一些，这些文本最终会在剪贴板中显示不重要的内容（如时间戳元素的文本等）
New Answer
当用户选择并复制文本时，您希望自动省略文本的某些部分。
我知道两个解决方案：
- 将文本放在不同的父元素中
- 用户开始选择时隐藏不需要的元素
解决方案＃1通常用于带行号的源代码。通过巧妙地应用CSS，两个DIV垂直对齐，使得每个行号看起来都在正确的源代码行的左侧（实际上是在不同的DIV中）。
这样，您可以在源代码中拖动您的选择而不获取任何行号。这适用于可以在垂直/水平对齐的框中显示的信息，或者如果可以将内容放入不同的表格单元格中，则可以使用不同的图片。
解决方案＃2响应第一次鼠标点击并将display: none应用于具有某个类的元素，如omit-during-copy。
这种方法的优点是用户可以看到他们正在复制什么（即不需要的信息正在消失）。
缺点是如何/何时恢复状态。
其变体是使用绝对定位使元素出现在某个位置。如果你必须将技术应用于像aHIDEb这样的东西，这将变得很乏味 - 你必须在a和b之间放置足够的空白空间以在它们之间显示HIDE，然后将HIDE像素完美地放在间隙中。并非不可能，但我会尝试重新排列信息。
Old Answer
有两种方法可以阻止用户从HTML页面复制文本：
- 不要显示它
- 使用密码字段
让我解释一下：您可以在页面本身使用JavaScript尝试少量事项。如果您吞下Ctrl + C，那么人们将使用鼠标。如果您在页面中按下鼠标按钮，它们将使用菜单栏。如果禁用浏览器的菜单栏，人们将停用“允许JavaScript隐藏菜单栏”选项。
如果您使用密码字段，人们将使用JavaScript控制台或“显示源”，或者他们将使用像Tampermonkey这样的工具来摆脱您对生活的讨厌侵扰。
您可以尝试使用文本显示图像。然后人们将使用OCR。因此，即使您使用基于Flash的HTML查看器来替换整个页面，人们仍然可以复制文本。但这会让他们非常生气。
个人注意事项：我倾向于访问那些尝试过一次这样的事情的页面。我倾向于长时间记住这些网站并且非常消极情绪。所以，如果我是你，我试着这只是为了让人们远离我的网站。
如果有人仍在寻找防止复制不重要元素（如行号）的方法，答案是使用伪元素：
.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>以上是关于如何防止某个元素的文本被复制到剪贴板？的主要内容，如果未能解决你的问题，请参考以下文章