复制事件后修改剪贴板内容：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）有人能告诉我如何在这里修改剪贴板内容吗？

- Geeky Ninja

---

它抛出了错误。给出实际的错误信息可能有助于我们帮助您 ;) - Wesley Smith

"Throws error" ... 你不觉得错误信息在这里可能会有帮助吗？ - charlietfl

请查看：https://dev59.com/fHRC5IYBdhLWcg3wJNcN - Ben Temple-Heald

@GeekyNinja 因为安全考虑，挂钩别人的副本并不是真正可能的。例如，他们从文本框中复制了“http://www.google.com”，你可以将其更改为JS调用，当他们将其复制到浏览器窗口时，它会下载病毒（如果他们没有注意）。一种解决方案是，在您希望他们复制的框的末尾添加一个“复制”按钮，该按钮获取内容，解析它，然后执行我链接的操作（通过按钮单击触发）。 - Ben Temple-Heald

https://dev59.com/RXI95IYBdhLWcg3wvgl9？ - l2aelba

Answer 1

目前被接受的答案过于复杂，会导致用户复制后选择内容被删除的奇怪行为。

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

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

- Andy H.

Answer 2

为了解决这个问题，我在“复制”事件上绑定了一个名为“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);
                }
        }

- Geeky Ninja

---

谢谢你提供“cut”部分。我也遇到了复制递归循环错误，不知道该怎么办:P - powersource97

Answer 3

我可以找到两件事情。

1. e回调对象中将包含clipboardData对象，而不是在window中。
2. setData的正确语法如下所示。

更多参考请查看复制事件MDN

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

- Ashutosh Tripathi

---

我已经尝试过了，但是e.clipboardData对象返回_undefined_。不起作用 :( - Geeky Ninja

你使用的是哪个浏览器？ - Ashutosh Tripathi

我正在使用Internet Explorer 9。 - Geeky Ninja

是的。IE9根本不支持clipboardData。请查看http://caniuse.com/#search=clipboarddata。 - Ashutosh Tripathi

Answer 4

将元素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();
          });

- Sollymanul Islam