小编典典

单击按钮复制到剪贴板

all

如何将 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,必须粘贴。


阅读 121

收藏
2022-03-11

共1个答案

小编典典

截至 2016 年的编辑

从 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">

这是一个更高级的演示:https
://jsfiddle.net/jfriend00/v9g1x0o6/

而且,您还可以使用clipboard.js获得一个为您执行此操作的预构建库。


答案的古老历史部分

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

如前所述,ZeroClipboard是一组流行的代码,用于管理 Flash
对象以进行复制。我用过。如果浏览设备(不包括移动设备或平板电脑)上安装了 Flash,则它可以工作。


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

可以在这些先前的 Stack Overflow 帖子中找到有关该问题的其他讨论和可能的解决方法:


这些要求使用 Flash 的现代替代方案的问题收到了很多问题的支持,但没有解决方案的答案(可能是因为不存在):


Internet Explorer 和 Firefox 曾经有用于访问剪贴板的非标准 API,但它们更现代的版本已弃用这些方法(可能出于安全原因)。


有一个新兴的标准努力试图提出一种“安全”的方法来解决最常见的剪贴板问题(可能需要像 Flash
解决方案一样需要特定的用户操作),看起来它可能在最新版本中部分实现Firefox 和 Chrome 的版本,但我还没有确认。

2022-03-11