复制事件中的event.clipboardData.setData
我看过很多帖子，但没有找到以下两个问题的明确答案，因为标准和浏览器支持似乎在不断变化。
按照标准，在“复制”事件处理程序中更改带有event.clipboardData.setData的剪贴板是合法操作吗？
回答 5
Stack Overflow用户
发布于 2016-04-03 01:37:23
自2016年起，剪贴板API确实在积极开发，但自那时以来，情况已经稳定下来：
支持使用event.clipboardData.setData()
规范允许使用event.clipboardData.setData()在'copy'事件处理程序中更改剪贴板(只要事件不是合成)。
请注意，需要防止事件处理程序中的默认操作，以防止更改被浏览器覆盖：
document.addEventListener('copy', function(e){
e.clipboardData.setData('text/plain', 'foo');
e.preventDefault(); // default behaviour is to copy any selected text
});要触发复制事件，请使用execCommand
如果需要触发复制事件(而不仅仅是处理用户通过浏览器UI发出的复制请求)，则必须使用document.execCommand('copy')。它只在某些处理程序中工作，例如click处理程序：
document.getElementById("copyBtn").onclick = function() {
document.execCommand('copy');
}现代浏览器支持这两种方法。
- 火狐支持
copy/cut/paste事件中的clipboardData(自从Firefox 22)和用户操作中的execCommand('copy')(自从Firefox 41) - Chrome也支持两者(后者是添加铬43 -或也许是42岁？)
- caniuse.com声称Safari 12完全支持，高达9.1的版本不支持
execCommand('copy')。 - 从2019年起，MS边缘平台状态将IE/Edge列为支持剪贴板API的工具，这与首次编写这个答案(2016年)时不同。
https://github.com/garykac/clipboard/blob/master/clipboard.md为execCommand(cut / copy / paste)提供了一个兼容性表。
您可以使用下面的代码片段进行测试，请与结果进行注释。
更多资源
- 规格：剪贴板API和事件
- JavaScript中复制和粘贴的最终指南 (2014年)-有关剪贴板API在浏览器中的互操作性的更多信息，包括对“复制”/“粘贴”事件的支持，而不需要选择和支持多种格式。
- MDN上标注“剪贴板API”的页面
测试用例
window.onload = function() {
document.addEventListener('copy', function(e){
console.log("copy handler");
if (document.getElementById("enableHandler").checked) {
e.clipboardData.setData('text/plain', 'Current time is ' + new Date());
e.preventDefault(); // default behaviour is to copy any selected text
}
// This is just to simplify testing:
setTimeout(function() {
var tb = document.getElementById("target");
tb.value = "";
tb.focus();
}, 0);
});
document.getElementById("execCopy").onclick = function() {
document.execCommand('copy'); // only works in click handler or other user-triggered thread
}
document.getElementById("synthEvt").onclick = function() {
var e = new ClipboardEvent("copy", {dataType: "text/plain", data:"bar"});
document.dispatchEvent(e);
}
}<html>
<input id="enableHandler" type="checkbox" checked>
<label for="enableHandler">Run clipboardData.setData('text/plain', ...) in the "copy" handler</label>
<p>Try selecting this text and triggering a copy using</p>
<ul>
<li><button id="execCopy">document.execCommand('copy')</button> - should work.</li>
<li><button id="synthEvt">document.dispatchEvent(clipboardEvent)</button> - should NOT work</li>
<li>with keyboard shortcut - should work</li>
<li>or from the context menu - should work</li>
</ul>
<p>If the "copy" handler was triggered, the focus will move to the textbox below automatically, so that you can try pasting from clipboard:</p>
<input type="text" id="target" size="80">
异步剪贴板API将提供一种更简单的方法来管理剪贴板。
在实现时，navigator.clipboard将允许您编写如下代码：
navigator.clipboard.writeText('Text to be copied')
.then(() => {
console.log('Text copied to clipboard');
})
.catch(err => {
// This can happen if the user denies clipboard permissions:
console.error('Could not copy text: ', err);
});Chrome 66开始发布部分实现，他们已经发布了一篇关于新API的文章。
Stack Overflow用户
发布于 2017-04-18 22:39:20
您还可以将其转换为调用其自己的处理程序并删除它的函数。
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}Stack Overflow用户
发布于 2017-08-24 09:18:22
将元素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();
});https://stackoverflow.com/questions/36270886
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号