复制时如何排除部分文本答案

【问题标题】：How to exclude portions of text when copying复制时如何排除部分文本
【发布时间】：2011-03-17 07:41:26
【问题描述】：

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

到目前为止，我已经尝试了几种不同的方法，但都没有奏效，我已经设法使用 CSS 用户选择使文本不可选择，但当我选择两行或多行时，我仍然可以复制文件大小。

我只是尝试使用一个按钮来防止复制，这不起作用，有什么想法吗？

<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 提供的建议标题和一个解决方案）

【问题讨论】：

【解决方案1】：

实现这项工作的一个相当老套的方法是使用 ::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。

【讨论】：

【解决方案2】：

Ugly hack alert：创建文本的 2 个版本，一个有大小，一个没有大小，否则相同，并将它们放在重叠的 div 中，没有大小的版本具有更高的 z-index。

更好的解决方案，也许不是跨浏览器，是添加一个

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

我建议重命名“如何在复制时排除部分文本”这个问题，因为就目前而言，听起来您正在寻找一般的无望的复制保护方案，而这个问题很有趣。

【讨论】：

【解决方案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>

【讨论】：

我尝试了用户选择方法，它会阻止选择，但在选择多行时仍然会复制文本。
@Mint - 你使用的任何选项都可以做到这一点，除非你在 JavaScript 中手动删除它。如果您可以选择一个范围，它必须是一个连续范围 ...我能想到的唯一选择是让这些项目脱离正常的文档流，使其出现在右侧地点，但不在可选范围内。
嗯，是的，这值得一试。没这么想过。