4

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

到目前为止，我已经尝试了几种不同的方法，但都没有奏效，我已经设法使用 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 的建议标题和一种解决方案）

4

3 回答 3

3

实现这项工作的一个相当老套的方法是使用::before或::after伪元素使用 csscontent:属性插入您的文本。

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。

于 2015-08-09T05:18:43.783 回答
2

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

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

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

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

于 2010-07-17T11:49:21.267 回答
0

使用跨度（或任何文本容器）和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>
于 2010-07-17T11:14:33.017 回答