将数据复制到剪贴板而不选择任何文本

Question

是否有任何跨平台，甚至大部分跨平台的方法可以将文本复制到 JavaScript 中的剪贴板，而无需创建元素，将其放在页面上，然后选择文本？带有“复制到剪贴板”按钮的网站是如何做到的？我不希望它使用输入字段，因为这个想法是将任何内容复制到剪贴板中，即使是元素中可能没有的内容。

Answer 1

我相信现在你可以使用 navigator.clipboard，如果你只关心它在现代版本的 chrome、firefox、edge 和 opera 中的工作。

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard

例如

var amazingText = "Hello World! How sweet the content";
navigator.clipboard.writeText(amazingText);

对于 safari，即旧浏览器和其他任何支持的最佳选择是检查 navigator.clipboard 是否已定义，并回退到旧的低效创建丢弃元素选择和复制作为最后的手段。

我主要在有相当多的数据要复制到剪贴板时使用它，因为我注意到 select 和 exec 方法存在性能问题。

编辑*

我按照建议简单地查看了 clipboard.js 网站，有一句话说“这个库依赖于选择和 execCommand API。” 这表明它可能没有提供问题的答案。但是，我还没有查看来源来验证这一假设。

https://clipboardjs.com/#browser-support

Answer 2

希望这就是您所寻找的。

document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("txt"));
});

setInterval(function(){
document.getElementById("txt").innerHTML = "Copy Me!!! @ " + new Date().getTime();
},1000);

function copyToClipboard(elem) {
	  // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try {
    	  succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }
    
    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

input {
  width: 400px;
}

<div id="txt">copy me!!!</div><br><br><button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">