如何使用 javascript 从多个 div 中仅复制一个 DIV

Question

如何将文本从 div 复制到剪贴板。我能做的就是在剪贴板中只获取一个数据。

<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>

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>

Answer 2

如果您使用 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>

Answer 3

我认为 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>

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>

如何使用 javascript 从多个 div 中仅复制一个 DIV

How to copy in clipboard only one DIV from multiple divs using javascript

html

javascript

jquery

bootstrap-4