复制事件后修改剪贴板内容：JavaScript、jQuery

Question

我的要求： 当用户从我的网页复制一些内容时，带有一些 HTML 标签的文本和回车也被复制。我需要修改剪贴板中复制的内容，即删除回车和 HTML 标签。

目前我尝试过的： 我什至使用 jQuery 捕获了副本并获取了剪贴板的内容。请参阅下面的代码。

$(document).bind('copy', function () {
      //getting clipboard content
      var selectedText = window.getSelection().toString();

      //removing carriage retun from content
      selectedText = selectedText.replace(/<\/?[^>]+(>|$)/g, "");

      //Trying to set data in clipboard
      window.clipboardData.setData(selectedText); //Throws error
}

现在，当我尝试使用 window.clipboardData.setData(selectedText); 在剪贴板中设置数据时，它会抛出错误。

问题：

1) 我是否使用了正确的功能，即 setData() 来修改剪贴板内容？

2) 谁能告诉我如何在这里修改剪贴板的内容？

Answer 1

我可以找出两件事。

clipboardData 对象将在回调对象 e 中传递，而不是在 window 中传递。
setData 的正确语法如下。

进一步参考copy Event MDN

document.addEventListener('copy', function(e) {
  console.log('copied');
  e.clipboardData.setData('text/plain', 'Hello World!');
  e.preventDefault();
});

Answer 2

为了解决这个问题，我在 copy 事件上做了什么，我绑定了一个函数，即 copyToClipboard，它在运行时间创建了一个 textarea，复制修改后的剪贴板数据到此文本区域，然后执行 'CUT' 命令（以避免对复制事件进行递归调用）。最后删除 finally 块中的 textarea 元素。

代码：

$(document).bind('copy', function () {
            var text = window.getSelection().toString().replace(/[\n\r]+/g, '');
            copyToClipboard(text);
        });

        function copyToClipboard(text) {
                var textarea = document.createElement("textarea");
                textarea.textContent = text;
                textarea.style.position = "fixed";
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    return document.execCommand("cut");
                } catch (ex) {
                    console.warn("Copy to clipboard failed.", ex);
                    return false;
                } finally {
                    document.body.removeChild(textarea);
                }
        }

Answer 3

将元素id与复制事件绑定，然后获取选中的文本。您可以替换或修改文本。获取剪贴板并设置新文本。要获得准确的格式，您需要将类型设置为 "text/hmtl"。您也可以将其绑定到文档而不是元素。

         $(ElementId).bind('copy', function(event) {
            var selectedText = window.getSelection().toString(); 
            selectedText = selectedText.replace(/\u200B/g, "");

            clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
            clipboardData.setData('text/html', selectedText);

            event.preventDefault();
          });

Answer 4

当前接受的答案过于复杂，并导致用户的选择在复制后被删除的奇怪行为。

这里有一个更简单的解决方案：

document.addEventListener('copy', function(e){
  var text = window.getSelection().toString().replace(/[\n\r]+/g, '');
  e.clipboardData.setData('text/plain', text);
  e.preventDefault();
});

复制事件后修改剪贴板内容：JavaScript、jQuery

Modify Clipboard content after copy event: JavaScript, jQuery

html

javascript

clipboard

jquery

clipboarddata