单击按钮使用jQuery复制到剪贴板

Question

如何将div中的文本复制到剪贴板？我有一个div，需要添加一个链接，该链接会将文本添加到剪贴板。有解决方案吗？

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

单击复制文本后，然后按Ctrl+ V，必须将其粘贴。

Answer 1

编辑

自2016年起，您现在可以在大多数浏览器中将文本复制到剪贴板，因为大多数浏览器都可以通过编程方式将选择的文本复制到剪贴板document.execCommand("copy")，从而可以将所选内容关闭。

与浏览器中的某些其他操作（如打开新窗口）一样，只能通过特定的用户操作（如单击鼠标）将内容复制到剪贴板。例如，它不能通过计时器来完成。

这是一个代码示例：

document.getElementById("copyButton").addEventListener("click", function() {

    copyToClipboard(document.getElementById("copyTarget"));

});



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;

}


<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>

<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

答案的历史部分

出于安全原因，任何现代浏览器均不允许通过JavaScript直接复制到剪贴板。最常见的解决方法是使用Flash功能将其复制到剪贴板，这只能由用户直接单击触发。

如前所述，ZeroClipboard是用于管理Flash对象进行复制的常用代码集。我用过了如果在浏览设备上安装了Flash（排除了移动设备或平板电脑），则它可以工作。

下一个最常见的解决方法是将剪贴板上的文本放置在输入字段中，将焦点移到该字段上，并建议用户按Ctrl+ C复制文本。

Internet Explorer和Firefox曾经具有用于访问剪贴板的非标准API，但它们的较新版本已弃用了这些方法（可能出于安全原因）。

一项新兴的标准工作试图尝试一种“安全”的方法来解决最常见的剪贴板问题（可能需要像Flash解决方案所要求的那样的特定用户操作），并且看起来它可能是在最新版本中部分实现的版本的Firefox和Chrome，但我尚未确认。