如何使用 JavaScript 将文本复制到剪贴板？ [复制]

Question

所有 Youtube 教程似乎都在教授现已弃用的 Document.execCommand()。我试了一下，因为这个 MDN website 上的例子。也许还有其他方法？

navigator.permissions.query({name: "clipboard-write"}).then(result => {
  if (result.state == "granted" || result.state == "prompt") {
    /* write to the clipboard now */
    console.log("safe");
  }
});

let button = document.querySelector('button');

button.addEventListener('click', (e) => {
    let data = "red";
    navigator.clipboard.writeText(data).then(function() {
    /* success */
      console.log("success", data);
    }, function() {
      console.log("fail")
    /* failure */
    });
});

<button>Click me</button>

Answer 1

当然，您可以像在问题中那样将文本复制到剪贴板，也可以使用await/async。在下面试试这个。我没有包含查询，因为像 chrome 这样的浏览器并不总是返回正确的权限状态。

let button = document.querySelector('button');
button.onclick = async (e) => {
    let data = "red";
    try {
        await navigator.clipboard.writeText(data);
        console.log("all good")
    }
    catch(err) {
        console.log(err);
    }
}

<button>Click Me!</button>