一尘不染

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

html

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


阅读 1806

收藏
2020-05-10

共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,但我尚未确认。

2020-05-10