使用 CSS 或 JavaScript 复制/剪切时删除文本样式

Question

如何让我的用户从我的网站复制/剪切样式文本，而不带任何样式包袱（背景颜色、颜色等）？

已挫败的攻击路线：

1. 使用 ::select 为文本设置不同的样式？ 不起作用，::style 未复制
2. 设置所选文本的样式使用 jQuery 的选择绑定 这只适用于输入，不适用于 p、div
3. 通过使用 jQuery 将事件绑定到复制/粘贴来拦截和删除样式？ 无法访问复制的对象以删除内容，尝试使用e.preventDefault();然后返回事件对象，但这也不起作用
4. 保存剪贴板数据后修改它吗？ 也没有骰子，大多数浏览器不会让你在没有 flash 和一些的情况下进入这个排序确认

Answer 1

考虑到当前的浏览器功能，您可以拦截复制事件，获取不带样式的选择，并将其放入剪贴板。

我已经用 Chrome/Safari/Firefox 测试了这段代码。相信它也应该适用于 MS 浏览器。

document.addEventListener('copy', function(e) {
  const text_only = document.getSelection().toString();
  const clipdata = e.clipboardData || window.clipboardData;  
  clipdata.setData('text/plain', text_only);
  clipdata.setData('text/html', text_only);
  e.preventDefault();
});

Answer 2

我现在没有时间编写示例，但是您可以对键盘快捷键触发的剪切/复制执行此操作。它不适用于通过上下文菜单或编辑菜单选项进行剪切/复制，因为它依赖于在剪切或复制事件触发之前更改用户选择。

步骤：

1. 处理 Ctrl-C 和 Ctrl-X 键盘快捷键以及 Mac 等效项。
2. 在此处理程序中，创建一个离屏元素（例如，绝对位置和左侧 -10000px）并将所选内容复制到其中。您可以使用 window.getSelection().getRangeAt(0).cloneContents() 来完成此操作，但 IE 需要单独的代码。 9 然后您应该检查选择是否折叠。
3. 执行任何您喜欢的操作来更改屏幕外元素内容的样式。
4. 移动选择以包含屏幕外元素的内容，以便剪切或复制该内容。
5. 使用 window.setTimeout() 添加短暂的延迟（几毫秒），该延迟调用一个删除屏幕外元素并恢复原始选择的函数。

Answer 3

触发复制或剪切后，您可以剥离 html 标签，只剥离带有某些正则表达式的文本。

var String = Sample.replace(/(<([^>]+)>)/ig,"");

此外，如果您将存储的文本存储在 ID 为“sample_div”的 div 中
使用 var String=$('sample_div').text(''); 只获取里面的文本

Answer 4

您是否需要在浏览器中为每个用户执行此操作？

如果不 - 而且它只适合您 - 那么您可以使用 Clipmate 软件来完成此操作。

http://www.clipmate.com/index.htm

它具有删除所有样式的功能。