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

问题描述：

我需要创建一个模块来格式化用户从我们的Web应用程序复制的文本。使用jQuery DOM：如何从Chrome中的复制事件中获取复制的文本？

拦截copy事件提取文本，用户从copy事件
格式的文本
有格式的文本保存到复制：这种模块会表现这样的事情用户剪贴板

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

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

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

我可以通过检查e.originalEvent.clipboardData访问与此copy事件相关联的对象DataTransfer，但是当我做检查它，types阵列的长度包含0和items属性也为空。

看起来好像没有办法通过提供的API访问复制到剪贴板的数据。

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

答

经过一番研究，我相信我已经找到了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中的复制事件中获取复制的文本？

相关推荐