创建“自动复制到剪贴板”javascript答案

【问题标题】：Create 'Automatic copy to clipboard' javascript创建“自动复制到剪贴板”javascript
【发布时间】：2021-02-16 00:02:23
【问题描述】：

我想要一个页面将一些预设文本复制到剪贴板以供加载的用户使用。

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
  console.log(copyText.value)
}

function myClick() {
  document.getElementById("myButton").click();
}

<body onload="myClick()">
    <input type="text" value="COPIED" id="myInput">
    <button onclick="myFunction()" id="myButton">Copy text</button>
</body>

出现警报，控制台记录值 - 已复制

但文本实际上并未复制到剪贴板。单击“复制文本”按钮 - 有效吗？

【问题讨论】：

可能是一种安全机制，以防止您在不询问的情况下覆盖我当前可能在剪贴板中拥有的内容！
我很乐意询问 - 但想知道如何获得该许可 :-)
@JayOram 在用户操作后授予权限。对于第一条评论中提到的逻辑后果，恐怕没有任何自动机制可供您使用。
不，您不能在这里明确要求任何“许可”。按钮是您“询问”用户是否要将某些内容复制到剪贴板中的方式 - 而单击按钮将是他们回答该问题的方式。
@CBroe - 实际上，有一个新的实验性 API 与权限相关联。

标签： javascript html

【解决方案1】：

您不能在用户的剪贴板中添加任何内容，除非是为了响应他们的公开操作，例如按钮点击。想一想：您在剪贴板中放了一些东西，浏览了一个网页，然后单击粘贴，然后粘贴了一些完全出乎意料的东西。这不行，所以浏览器不允许你这样做。

在您提出的评论中：

我可以请求许可吗？

最近的asynchronous clipboard API 与"clipboard-write" permission 相关联。例如，当我从 secure context 运行此代码时，此代码适用于页面加载：

navigator.permissions.query({name: "clipboard-write"})
.then(({state}) => {
    console.log(`permission response: ${state}`);
    if (state === "granted") {
        const data = [new ClipboardItem({ "text/plain": new Blob([`The time is ${new Date()}`], { type: "text/plain" }) })];
        navigator.clipboard.write(data).then(
            () => {
                console.log("Clipboard write succeeded");
            },
            () => {
                console.error("Clipboard write failed");
            }
        );
    }
});

我有点不高兴看到 Brave 和 Chrome 都没有提示我授予权限。奇怪的是，据我所知，我将它们配置为在应用程序想要访问剪贴板时询问我，但我没有得到任何提示。看起来像一个 Chromium 错误。

作为用户，如果一个网站在任何情况下都写入我的剪贴板，我会非常发怒“复制到剪贴板”或类似内容。这可能会让我再也不会访问该网站。

【讨论】：

有没有办法在页面加载而不是点击时请求权限？
@JayOram 加载是自动的 - 不是用户操作（例如：按钮单击事件）
@JayOram - 实际上，有一个更新的实验性 API 与权限相关联。
@T.J.Crowder - 这是一个可行的想法，即从一封带有号召性用语/按钮的电子邮件移动，上面写着复制代码并访问“URL”——然后它会复制代码并转到网站，因为您不能在电子邮件中使用 Javascript 复制到剪贴板。