如何控制复制到剪贴板的文本

Posted 2023-03-03

【中文标题】如何控制复制到剪贴板的文本

【英文标题】：How to control the text copied to clipboard

【发布时间】：2013-09-17 00:07:04

【问题描述】：

我有一个 html 表格，我看到人们复制/粘贴该表格的部分内容。当我尝试它时，结果是一团糟，需要大量清理，因为该表包含很多包含图像和内容的列。

有没有办法将选择限制在表格的前 2 列？

或

有没有办法替换正在复制的文本（用户选择“苹果”并按下复制，但“香蕉”最终出现在剪贴板中）？

【参考方案1】：

javascript 无法控制剪贴板，这是 Flash 的一种常见用途。

您可以在后一个表的<td> 元素上使用user-select: none 来阻止CSS 中的文本突出显示。由于user-select 是一个新属性，您必须为某些浏览器添加前缀：

-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
     -o-user-select: none;
        user-select: none; 

有关更多信息，请参阅http://css-tricks.com/almanac/properties/u/user-select/。还要注意user-select在IE9或更低版本中不可用。

【讨论】：

我试过这个，但用户选择：无；似乎被浏览器忽略了。

现在您已经添加了 -moz- 前缀，它可以在 Firefox 中使用。在其他浏览器中，这没有预期的效果。

-webkit- 将在 Chrome/Safari 中运行，-ms- 在 IE10+ 中运行。您在使用什么浏览器时遇到问题？

在 webkit 和 IE 中，它使标记的区域无法选择。但是，如果我选择周围环境，即使标记为用户选择，两者之间的内容仍会被复制。 Firefox 的行为有所不同。

你将user-select应用于什么？

【参考方案2】：

This answer from a Trello developer 为类似于您想要做的事情提供了一个漂亮的解决方案。基本上，当用户按下 Cmd+C 或 Ctrl+C 时，您可以选择一些有用的东西，然后复制到剪贴板。

【参考方案3】：

为了限制列选择，我会按照 Mooseman 的建议使用用户选择。问题是浏览器目前支持他们自己的属性版本，而不是实际的用户选择。

<style>
    .notSelectable  
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    
</style>

你可以在http://caniuse.com/user-select-none查看它的支持