12

我的要求：当用户从我的网页复制一些内容时，一些 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
}

现在，当我尝试使用 setData 在剪贴板中时window.clipboardData.setData(selectedText);，它会引发错误。

问题：

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

2）有人可以告诉我如何在这里修改剪贴板的内容吗？

4

4 回答 4

18

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

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

document.addEventListener('copy', function(e){
  var text = window.getSelection().toString().replace(/[\n\r]+/g, '');
  e.clipboardData.setData('text/plain', text);
  e.preventDefault();
});
于 2019-04-02T03:05:22.780 回答
7

为了解决这个问题，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);
                }
        }
于 2017-02-07T13:59:11.303 回答
4

我可以找出两件事。

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

如需进一步参考，请复制 Event MDN

document.addEventListener('copy', function(e) {
  console.log('copied');
  e.clipboardData.setData('text/plain', 'Hello World!');
  e.preventDefault();
});
于 2017-02-07T12:38:32.357 回答
0

将元素 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();
          });
于 2017-08-24T09:05:07.227 回答