gpt4 book ai didi

javascript - 复制事件中的 event.clipboardData.setData

转载 作者:技术小花猫 更新时间:2023-10-29 12:05:40 27 4
gpt4 key购买 nike

我看了很多帖子,但找不到以下两个问题的明确当前答案,因为标准和浏览器支持似乎一直在不断变化。

根据标准,在“复制”事件处理程序中使用 event.clipboardData.setData 更改剪贴板是否合法?

最佳答案

截至 2016 年,剪贴板 API 确实处于积极开发阶段,但此后情况趋于稳定:

支持使用 event.clipboardData.setData()

规范允许在 'copy' 事件处理程序中使用 event.clipboardData.setData() 更改剪贴板(只要事件不是 synthetic ) .

请注意,您需要阻止事件处理程序中的默认操作,以防止您的更改被浏览器覆盖:

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');
}

现代浏览器都支持这两种方法

https://github.com/garykac/clipboard/blob/master/clipboard.md 有一个 execCommand(cut/copy/paste) 的兼容性表。

您可以使用下面的代码片段对此进行测试,请对结果发表评论。

更多资源

测试用例

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">

Async Clipboard 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 开始交付部分实现,他们已经发布了 an article about the new API

关于javascript - 复制事件中的 event.clipboardData.setData,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36270886/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com