document.addEventListener 和 document.execCommand("copy") 的组合在 Safari 中不起作用

Question

我有以下代码，在 Chrome/Edge/Firefox 中工作得很好，当然是最新版本，但我希望即使是几年前的旧浏览器也能正常工作。

现在在 Safari 15.3（我认为是最新的，至少是最近的）中，这段代码根本不起作用。

function copy() {
 const copyListener = (event: any) => {
    event.preventDefault();
    event.stopPropagation();
    event.clipboardData.setData("text/plain", "Random text data");
    event.clipboardData.setData("text/html", "<div>Random html data</div>");
 };
 var eventListenerOptions = {
    capture: true,
    once: true,
 };
 document.addEventListener("copy", copyListener, eventListenerOptions);
 document.execCommand("copy");
}

让我们假设这个 copy() 函数在 onClick 处理程序内部被调用。

然后在onClick被触发后，document确实注册了这个eventListener，只是没有被document.execCommand("copy")调用立即触发。它仅在我在 copy() 之后在屏幕上手动调用 select 并执行 ctrl+c 时触发。

所以提问时间： (1) 我在某处听说 Safari 不会在没有任何用户交互的情况下发出真正的复制事件，我想我已经确认了这一点，单击在其处理程序中调用 copy() 的按钮是用户交互？但也许不是正确的交互类型。关于这个有什么好的官方文档吗？我试图查看 https://developer.apple.com/safari/，但我认为它并没有真正为您提供任何有用的信息。

(2) 我看过周围的代码片段，Safari 的所有代码片段都在 dom 中使用范围 selections，然后调用 document.execCommand 因此最终解决方案我也是使用它，检查一下哪个浏览器，然后回退到 selection 范围，我只是认为它不支持关于“plain/text”和“plain/html" 所以我真的很想避免它，因为如果我可以稍微调整一下使其在所有 4 种浏览器上工作，那么复杂性会降低。

任何 answers/comments 不胜感激，谢谢！

Answer 1

原来 Safari 不支持 Firefox/Edge/Chrome/etc 支持的这个习语。

有一个自 2019 年以来一直未激活的错误报告 https://bugs.webkit.org/show_bug.cgi?id=156529

document.addEventListener 和 document.execCommand("copy") 的组合在 Safari 中不起作用

Combination of document.addEventListener and document.execCommand("copy") does not work in Safari

safari

addeventlistener

execcommand