如何将文本从 div 复制到剪贴板答案

【问题标题】：How to copy text from a div to clipboard如何将文本从 div 复制到剪贴板
【发布时间】：2016-04-15 06:25:36
【问题描述】：

这是用户点击此按钮时的代码：

<button id="button1">Click to copy</button>

如何复制此 div 中的文本？

<div id="div1">Text To Copy</div>

【问题讨论】：

来自 Div 而不是 Textarea
只用JS解决，见jsfiddle.net/jdhenckel/km7prgv4/3
stackoverflow.com/a/38672314/1568658 这个很好用

标签： javascript jquery

【解决方案1】：

我尝试了上面提出的解决方案。但这还不够跨浏览器。我真的需要 ie11 才能工作。尝试后我得到了：

    <html>
        <body>
            <div id="a" onclick="copyDivToClipboard()"> Click to copy </div>
            <script>
                function copyDivToClipboard() {
                    var range = document.createRange();
                    range.selectNode(document.getElementById("a"));
                    window.getSelection().removeAllRanges(); // clear current selection
                    window.getSelection().addRange(range); // to select text
                    document.execCommand("copy");
                    window.getSelection().removeAllRanges();// to deselect
                }
            </script>
        </body>
    </html>

使用 firefox 64、Chrome 71、Opera 57、ie11(11.472.17134.0)、edge(EdgeHTML 17.17134) 测试

2019 年 3 月 27 日更新。

由于某种原因，document.createRange() 以前无法使用 ie11。但现在正确地返回一个 Range 对象。所以最好使用它，而不是document.getSelection().getRangeAt(0)。

【讨论】：

这应该是这个帖子的最佳答案。经过几个小时找到一个可行的解决方案后，这终于对我有用。谢谢。 :-)
提示：在复制命令后再加一个window.getSelection().removeAllRanges();，可以在复制后取消选择内容。
当然，让我们将其添加到答案中。
这是使用基于Range 的选择的简化示例，它并不打算涵盖所有极端情况。并且主要展示了使用 Range 类的一种方式。您能否更具体一些或针对您的确切用例发布另一个问题？我自己使用了基于 Selections 的 Range 和多个 divs/elements 。我强烈建议检查Range API，看看它提供的任何其他功能是否有帮助。
@FarhanBinAmin 检查Range.setStart() 和Range.setEnd()。并使用那些而不是Range.selectNode()

【解决方案2】：

这两个例子都像一个魅力:)

JAVASCRIPT：

function CopyToClipboard(containerid) {
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy");
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().addRange(range);
    document.execCommand("copy");
    alert("Text has been copied, now paste in the text-area")
  }
}

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>
<br /><br />
<div id="div1">Text To Copy </div>
<br />
<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY（依赖于 Adobe Flash）： https://paulund.co.uk/jquery-copy-to-clipboard

【讨论】：

只是为了补充这个答案，有一个我用过几次的简洁插件可以处理这个问题：clipboardjs.com
第一个不工作
请告诉我第一个示例如何工作
我有一个问题，这适用于所有浏览器吗？
在调用window.getSelection().addRange(range)之前，调用window.getSelection().removeAllRanges()这个方法

【解决方案3】：

我得到 selectNode() param 1 is not of type node 错误。

将代码更改为此及其工作。（对于铬）

function copy_data(containerid) {
  var range = document.createRange();
  range.selectNode(containerid); //changed here
  window.getSelection().removeAllRanges(); 
  window.getSelection().addRange(range); 
  document.execCommand("copy");
  window.getSelection().removeAllRanges();
  alert("data copied");
}

<div id="select_txt">This will be copied to clipboard!</div>
<button type="button" onclick="copy_data(select_txt)">copy</button>
<br>
<hr>
<p>Try paste it here after copying</p>
<textarea></textarea>

【讨论】：

【解决方案4】：

当您要复制多个项目并且每个项目都有一个单独的“复制到剪贴板”按钮时，接受的答案不起作用。单击一个按钮后，其他按钮将不起作用。

为了使它们起作用，我在接受答案的函数中添加了一些代码，以在执行新选项之前清除文本选择：

function CopyToClipboard(containerid) {
    if (window.getSelection) {
        if (window.getSelection().empty) { // Chrome
            window.getSelection().empty();
        } else if (window.getSelection().removeAllRanges) { // Firefox
            window.getSelection().removeAllRanges();
        }
    } else if (document.selection) { // IE?
        document.selection.empty();
    }

    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select().createTextRange();
        document.execCommand("copy");
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
        document.execCommand("copy");
    }
}

【讨论】：

【解决方案5】：

<div id='myInputF2'> YES ITS DIV TEXT TO COPY  </div>

<script>

    function myFunctionF2()  {
        str = document.getElementById('myInputF2').innerHTML;
        const el = document.createElement('textarea');
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        alert('Copied the text:' + el.value);
    };
</script>

【讨论】：

请解释一下你的代码是做什么的以及它是怎么做的；一个链接是不够的。
请注意 execCommand 现在已弃用 developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

【解决方案6】：

此解决方案将复制后的文本取消选择添加到剪贴板：

function copyDivToClipboard(elem) {
    var range = document.createRange();
    range.selectNode(document.getElementById(elem));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand("copy");
    window.getSelection().removeAllRanges();
}

【讨论】：

【解决方案7】：

所有这些都不适合我。但是我发现了答案对我有用的问题的副本。

这里是link

How do I copy to the clipboard in JavaScript?

【讨论】：

【解决方案8】：

对解决方案进行了修改，因此它将与基于类而不是特定 ID 的多个 div 一起使用。例如，如果您有多个代码块。这假定 div 类设置为“代码”。

<script>
        $( document ).ready(function() {
            $(".code").click(function(event){
                var range = document.createRange();
                range.selectNode(this);
                window.getSelection().removeAllRanges(); // clear current selection
                window.getSelection().addRange(range); // to select text
                document.execCommand("copy");
                window.getSelection().removeAllRanges();// to deselect
            });
        });
    </script>

【讨论】：

【解决方案9】：

上述解决方案不适用于内容可编辑 div。需要更多步骤才能将其内容复制到剪贴板。

这里是如何将 div contenteditable 复制到剪贴板。在 iphone 和 Android 上选择文本并不总是那么容易。只需一个复制按钮，您就可以复制所有内容。

<div id="editor1" contenteditable="true"></div> 

<button id="button1" onclick="CopyToClipboard()">COPY</button>

<script>

function CopyToClipboard() {

    var copyBoxElement = document.getElementById('editor1');
    copyBoxElement.contenteditable = true;
    copyBoxElement.focus();
    document.execCommand('selectAll');
    document.execCommand("copy");
    copyBoxElement.contenteditable = false;
    alert("Text has been copied")
}

</script>

【讨论】：

请注意 execCommand 现已弃用 developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

【解决方案10】：

添加链接作为答案，以引起更多关注 Aaron Lavers 在第一个答案下方的评论。

这就像一个魅力 - http://clipboardjs.com。只需添加 clipboard.js 或 min 文件。在启动时，使用具有要单击的 html 组件的类，并将要复制的内容的组件的 id 传递给单击元素。

【讨论】：

【解决方案11】：

创建要附加到文档的元素。将其值设置为我们要复制到剪贴板的字符串。将所述元素附加到当前 HTML 文档。使用 HTMLInputElement.select() 选择元素的内容。使用 Document.execCommand('copy') 将的内容复制到剪贴板。从文档中删除元素

function copyToClipboard(containertext) {
    var el = document.createElement('textarea');
    el.value = containertext;
    el.text = containertext;
    el.setAttribute('id', 'copyText');
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);
    var coptTextArea = document.getElementById('copyText');
    $('#copyText').text(containertext);
    coptTextArea.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    /* Alert the copied text */
    alert("Copied : "+containertext, 1000);
}

【讨论】：