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

2018-06-06 07:55:33

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

编辑截至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">

还有另外一种非Flash方式（除了jfriend00的回答中提到的剪贴板API）。您需要选择文本，然后执行命令copy以将当前在页面上选择的任何文本复制到剪贴板。

例如，这个函数会将传入的元素的内容复制到剪贴板（在PointZeroTwo的注释中用建议更新）：

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

这是如何工作的：

创建一个临时隐藏文本字段。

将元素的内容复制到该文本字段。

选择文本字段的内容。

执行命令副本如： document.execCommand("copy") 。

删除临时文本字段。

你可以在这里看到一个快速演示：

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

clipboard.js是一个不错的工具，可以在不使用Flash的情况下将文本或HTML数据复制到剪贴板。它非常易于使用; 只需包含.js并使用如下所示的内容：

<button id='markup-copy'>Copy Button</button>

<script>
    document.getElementById('markup-copy').addEventListener('click', function() {
        clipboard.copy({
            'text/plain': 'Markup text. Paste me into a rich text editor.',
            'text/html': '<i>here</i> is some <b>rich text</b>'
        }).then(
            function(){console.log('success'); },
            function(err){console.log('failure', err);
        });
    });
</script>

clipboard.js也在GitHub上。

2016年1月15日编辑：今天编辑了最佳答案，以便在2015年8月发布的答案中引用相同的API。以前的文本指示用户使用ZeroClipboard。只是想清楚，我没有从jfriend00的回答中抽出这个，而是反过来。

链接地址: http://www.djcxy.com/p/19699.html

上一篇: Click button copy to clipboard using jQuery

下一篇: Is PowerShell ready to replace my Cygwin shell on Windows?