如何在复制时排除部分文本

Question

我试图让一些文字不可复制，我的目的不是阻止人们从我的网站上复制文本，而是让更容易使用。我有一个文件大小的文件列表，但我只想复制文件名而不是文件大小。

到目前为止，我尝试了一些不同的方法，但没有工作，我设法通过CSS用户选择使文本不可选择但我仍然可以在选择两行或更多行时复制文件大小。< / p>

我只是尝试使用一个按钮来防止复制，这对以太没有任何想法？

<a href="http://10.10.10.1/links/file.doc"file.doc</a>
 <button type="button" disabled="disabled" id="filesize">6 MB</button><br \>

目标浏览器是Mac上的Safari，因此可以在最新的Safari上运行的实验性CSS3或HTML5命令很好。

（感谢mvds建议的标题和一个解决方案）

Answer 1

丑陋的黑客警报：创建两个版本的文本，一个带有一个版本，一个没有大小，否则相同，并将它们放在重叠的div中，没有大小的版本具有更高的z-index。

更好的解决方案，可能不是跨浏览器，是添加

<input type="text" value="(6 MB)" style="border:0; ...">

我建议重命名“如何在复制时排除部分文字”这个问题，因为现在看来，这听起来像是在寻找平均无望的复制保护方案，而问题非常有趣。

Answer 2

使用::before或::after伪元素来使用css content:属性插入文本，这是一种相当愚蠢的方法。

<强> HTML：

<a href="http://10.10.10.1/links/file.doc">file.doc</a>  
<button type="button" disabled="disabled" id="filesize"><i></i></button>

<强> CSS：

button i:before {
 content: '6 MB';
}

优点：它的工作原理：即使选择了多行，它也不会被复制到剪贴板。

缺点：伪元素需要特别注意CSS样式，因为它们被插入到普通文档流之外。对多个元素使用content:属性也需要自定义标记或内联css。

Answer 3

使用span（或任何文本容器）和unselectable属性，如下所示：

<a href="http://10.10.10.1/links/file.doc">file.doc</a>
<span unselectable="on">6 MB</span>

这不会有用，但由于你有一个特定的浏览器目标，这对你的情况会很好：）

为了轻松支持更多的浏览器，你可以在那里抛出一些CSS，首先定义一个这样的类：

.unselectable { 
  user-select: none; 
  -moz-user-select: none; 
  -khtml-user-select: none; 
}

然后分配它，如下所示：

<a href="http://10.10.10.1/links/file.doc">file.doc</a>
<span class="unselectable" unselectable="on">6 MB</span>