如何使用javascript从多个div中仅复制一个DIV到剪贴板

Posted 2023-03-05

【中文标题】如何使用javascript从多个div中仅复制一个DIV到剪贴板

【英文标题】：How to copy in clipboard only one DIV from multiple divs using javascript

【发布时间】：2022-01-13 23:53:50

【问题描述】：

如何将文本从 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>

【问题讨论】：

你想在点击文字时复制特别是div吗？

【参考方案1】：

我也遇到了同样的问题。我找到了解决方案。 如果您想在同一 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>

【参考方案2】：

我认为 shirshak007 回答了。但我想分享一个替代代码 sn-p 给它。

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

【讨论】：

谢谢它也有效，你能告诉我我想让用户在同一个 div 中获取此消息，并在一段时间后旧 div 文本再次可见后替换旧文本一段时间

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

【参考方案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>

【参考方案4】：

你可以这样试试。在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>

【讨论】：

如果我想用一些自定义消息（如文本复制而不是警报消息）来更改 div 内容几秒钟，那么我该如何完成这项任务，你能建议我一些事情吗

您能详细说明一下吗？

在 div 内容复制后，我希望用户得到一些消息，您正在复制代码中的文本，此消息部分已经作为警报消息，我希望用户在同一个 div 中获取此消息，并替换旧文本一段时间后第二个 div 文本再次可见

您可以为此发布一个不同的问题吗？或修改此问题添加此部分

好的，我尝试修改