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

IT技术 javascript jquery
2021-02-09 05:52:49

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

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

如何复制此 div 中的文本？

<div id="div1">Text To Copy</div>
6个回答

我尝试了上面提出的解决方案。但这还不够跨浏览器。我真的需要 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();在复制命令后添加另一个以取消选择复制后的内容。
2021-03-14 05:52:49
当然，让我们将其添加到答案中。
2021-03-22 05:52:49
这应该是该线程中的最佳答案。在找到一个可行的解决方案几个小时后，这终于对我有用了。谢谢。:-)
2021-03-28 05:52:49
@FarhanBinAmin 检查Range.setStart()和Range.setEnd()。并使用它们代替Range.selectNode()
2021-04-02 05:52:49
这是使用Range基于选择的简化示例，并不打算涵盖所有极端情况。并且主要展示使用 Range 类的方法之一。您能否更具体地或针对您的确切用例发布另一个问题？我自己使用了带有多个/ s 的Rangebased s 。我强烈建议检查API，看看它提供的任何其他功能是否有帮助。SelectiondivselementRange
2021-04-10 05:52:49

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

  1. Java脚本：

    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>

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

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

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

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

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");
    }
}

我得到 selectNode() param 1 is not type node error。

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

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>

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

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();
}
其它你可能感兴趣的问题
上一篇使用 Javascript 播放声音通知？ 下一篇有没有好的 JavaScript 压缩器？