简单的 navigator.clipboard.writeText() 不起作用

Question

所以我使用的是 MacBook，并且有一个复制按钮，可以将生成的文本输入复制到文本字段。

这是代码：

document.querySelector("#btnCopy").addEventListener('click', copy);
async function copy(){
    
    var text = document.querySelector("#docNumber");
    text.select();
    navigator.clipboard.writeText(text.value)
}

当我检查剪贴板时，没有任何内容被复制。

对正在发生的事情有什么建议吗？

谢谢社区。

Answer 1

以下方法适用于 Chrome、Firefox、Internet Explorer 和 Edge，以及最新版本的 Safari（2016 年 10 月发布的版本 10 添加了复制支持）。

document.querySelector("#btnCopy").addEventListener('click', copyToClipboard);

function copyToClipboard() {
  let text = document.querySelector("#docNumber");
  text.select();
  text = text.value;

  if (window.clipboardData && window.clipboardData.setData) {
    // IE: prevent textarea being shown while dialog is visible
    return window.clipboardData.setData("Text", text);

  } else if (document.queryCommandSupported && 
             document.queryCommandSupported("copy")) {
    var textarea = document.createElement("textarea");
    textarea.textContent = text;
    // Prevent scrolling to bottom of page in MS Edge
    textarea.style.position = "fixed";
    document.body.appendChild(textarea);
    textarea.select();
    try {
      // Security exception may be thrown by some browsers
      return document.execCommand("copy");
    } catch (ex) {
      console.warn("Copy to clipboard failed.", ex);
      return false;
    } finally {
      document.body.removeChild(textarea);
    }
  }
}

<input id="docNumber" type="text" value="Clipboard text test">
<button id="btnCopy">Copy to Clipboard</button>

参考：

• 如何在 JavaScript 中复制到剪贴板？

Answer 2

我认为您需要将选定的文本分配给某些内容。

let t = text.select();

或者更好：

navigator.clipboard.writeText(text.select())

Answer 3

这可能是由于通过

http

而不是

https

托管造成的。 虽然，在这个案例中我们无法确定原因。

当在任何非

http

或

localhost

的地址上通过

127.0.0.1

调用寻呼时。浏览器会将

navigator.clipboard

保留为

undefined

。