如何使用JavaScript从多个DIV中只复制一个DIV到剪贴板

Question

如何将

中的文本复制到剪贴板。 我只能获得一个数据在剪贴板中。

<div id="div1">Text To Copy</div>
<div id="div2">Text To Copy</div>
<div id="div3">Text To Copy</div>
<div id="div4">Text To Copy</div>

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

- Mohammad Umair

---

当您单击特定的“div”中的文本时，您是否想要复制它？ - shirshak007

Answer 1

您可以尝试这种方法。在onclick事件中调用函数。

function copyDivToClipboard(id) {
  var range = document.createRange();
  range.selectNode(document.getElementById(id));
  window.getSelection().removeAllRanges(); // clear current selection
  window.getSelection().addRange(range); // to select text
  document.execCommand("copy");
  window.getSelection().removeAllRanges();// to deselect
  alert("Text Copied: "+range);
}

<div id="div1" onclick="copyDivToClipboard(this.id);">Text To Copy div1</div>
<div id="div2" onclick="copyDivToClipboard(this.id);">Text To Copy div2</div>
<div id="div3" onclick="copyDivToClipboard(this.id);">Text To Copy div3</div>
<div id="div4" onclick="copyDivToClipboard(this.id);">Text To Copy div4</div>

- shirshak007

---

如果我想要在某些自定义消息下更改div内容，并保持几秒钟，例如文本复制而不是像提示消息那样，则该如何执行此任务？你能给我建议吗？ - Mohammad Umair

请问您能否详细说明一下？ - shirshak007

在复制 div 内容后，我希望用户能够收到一些消息，告诉他们正在将文本复制到代码中。这个消息部分已经作为警报消息存在了，我希望用户在同一个 div 中获取此消息，并替换旧文本一段时间后再次显示 div 文本。 - Mohammad Umair

好的，我正在尝试修改。 - Mohammad Umair

请检查，我已经添加了另一个答案。 - shirshak007

Answer 2

我认为shirshak007已经回答了。但是我想分享一个替代的代码片段。

<script>

function CopyToClipboard(id) {
    var copyBoxElement = document.getElementById(id);
    copyBoxElement.contenteditable = true;
    copyBoxElement.focus();
    document.execCommand("copy");
    copyBoxElement.contenteditable = false;

    alert("Text has been copied :  " +  copyBoxElement.innerHTML)
}

</script>



<div id="div1"  onclick="CopyToClipboard(this.id)">Codebay</div> 
<div id="div2"  onclick="CopyToClipboard(this.id)">Software</div> 

- Codebay Software

---

谢谢，这也可以工作。你能告诉我如何在同一个 div 中获取此消息并替换旧文本一段时间后再次显示旧的 div 文本吗？ - Mohammad Umair

你能详细说明你的问题吗？或者你可以在新的部分分享这个问题吗？ - Codebay Software

Answer 3

如果您正在使用 jQuery，您也可以这样做。

$("div").click(function(e){
  var range = document.createRange();
  range.selectNode(document.getElementById(e.target.id));
  window.getSelection().removeAllRanges(); // clear current selection
  window.getSelection().addRange(range); // to select text
  document.execCommand("copy");
  window.getSelection().removeAllRanges();// to deselect
  console.log("Text Copied: "+range);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">Text To Copy1</div>
<div id="div2">Text To Copy2</div>
<div id="div3">Text To Copy3</div>
<div id="div4">Text To Copy4</div>

- shirshak007

Answer 4

我曾经也遇到了同样的问题，但是我找到了解决方法。 如果你想在同一个 div 中显示 message，只需要这样做：

function copyDivToClipboard(id) {
  var range = document.createRange();
  oldvalue = document.getElementById(id).innerHTML;
  
  range.selectNode(document.getElementById(id));
  window.getSelection().removeAllRanges(); // clear current selection
  window.getSelection().addRange(range); // to select text
  document.execCommand("copy");
  window.getSelection().removeAllRanges();// to deselect
  document.getElementById(id).innerHTML = "Text Copied";
  setTimeout(function(){document.getElementById(id).innerHTML = oldvalue }, 2000); //you can change the time 
}

<div id="div1" onclick="copyDivToClipboard(this.id);">Text To Copy div1</div>
<div id="div2" onclick="copyDivToClipboard(this.id);">Text To Copy div2</div>
<div id="div3" onclick="copyDivToClipboard(this.id);">Text To Copy div3</div>
<div id="div4" onclick="copyDivToClipboard(this.id);">Text To Copy div4</div>

- shirshak007