DOM：如何从 Chrome 中的复制事件中获取复制的文本？

Posted 2023-05-09

【中文标题】DOM：如何从 Chrome 中的复制事件中获取复制的文本？

【英文标题】：DOM: How do I get the copied text from a copy event in Chrome?

【发布时间】：2016-06-13 07:03:16

【问题描述】：

我需要创建一个模块来格式化用户从我们的 Web 应用程序复制的文本。这样的模块的行为如下：

使用 jQuery 拦截 copy 事件 提取用户从copy 事件中复制的文本 格式化文本 将格式化文本保存到用户剪贴板

我可以使用以下代码捕获copy 事件：

$("p").on("copy", function(e) 
  debugger;
);

当我执行此代码然后复制一些文本然后检查copy 事件时，我找不到包含所选文本的属性。

我可以通过检查e.originalEvent.clipboardData 来访问与此copy 事件关联的DataTransfer 对象，但是当我检查它时，types 数组的长度包含0 并且items 属性也是空的。

似乎无法使用提供的 API 访问复制到剪贴板的数据。

有threads on SO关于如何在paste事件的上下文中处理这些对象，但是我们如何在copy事件的上下文中处理这些对象呢？

【参考方案1】：

经过一番研究，我相信我找到了viable solution thanks to Google Developers page。

copy 事件很有趣，因为创建的Event 对象实际上没有与copy 事件本身关联的数据，除了目标元素。然而，我们可以使用getSelection 方法和range API 来提取复制的文本。从那里您可以使用document.execCommand('copy'); 将修改后的复制文本传输到您的操作系统剪贴板上。

var copyEmailBtn = document.querySelector('.js-emailcopybtn');  
copyEmailBtn.addEventListener('click', function(event)   
  // Select the email link anchor text  
  var emailLink = document.querySelector('.js-emaillink');  
  var range = document.createRange();  
  range.selectNode(emailLink);  
  window.getSelection().addRange(range);  

  try   
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy');  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('Copy email command was ' + msg);  
   catch(err)   
    console.log('Oops, unable to copy');  
    

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges();  
);