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，然后获取所选文本。您可以替换或修改文本。获取剪贴板并设置新文本。要获得确切的格式，您需要将类型设置为＆＃34; text / hmtl＆＃34;。您也可以将其绑定到文档而不是元素。

         $(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

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

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

SELECT shipment_line.shipment_id,shipment_line.inv_id,shipment_line.date_recieved,shipment.date_expected
FROM   shipment_line, shipment
WHERE  shipment_line.shipment_id = shipment.shipment_id;

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

4 个答案: