Question

我只能使用CSS，Javascript和HTML。我正在尝试布置一个类似于博客文章的表格。发布1，发布2，等等...

我正在尝试为每个帖子添加一个“复制文本”按钮，并让其复制该特定帖子的内容。我以为我已经弄清楚了，但是没有用。无论我单击哪个按钮，它都只会复制1格。

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("Copied!")
  }
}

<div id="div1">
  CONTENT I WANT COPIED - POST 1
</div>
<button class="button" onclick="CopyToClipboard('div1')">Click To Copy</button>

<div id="div2">
  CONTENT I WANT COPIED - POST 2
</div>
<button class="button" onclick="CopyToClipboard('div2')">Click To Copy</button>

发生的事情是，无论使用哪个按钮，它都只复制其中一个帖子

Answer 1

您需要先删除选择范围，然后再添加另一个

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));
    var sel = window.getSelection()
    sel.removeAllRanges();
    sel.addRange(range);
    document.execCommand("copy");
    console.log("Copied!")
  }
}

<div id="div1">
  CONTENT I WANT COPIED - POST 1
</div>
<button class="button" onclick="CopyToClipboard('div1')">Click To Copy</button>

<div id="div2">
  CONTENT I WANT COPIED - POST 2
</div>
<button class="button" onclick="CopyToClipboard('div2')">Click To Copy</button>

如何使用javascript和html复制不同的div？

1 个答案: