Question

我需要创建一个模块，用于格式化用户从我们的Web应用程序复制的文本。这样的模块会表现得像这样：

使用jQuery拦截copy事件
从copy事件
格式化文字
将格式化文本保存到用户剪贴板

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

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

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

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

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

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

Answer 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();  
});

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

1 个答案: