javascript - 复制论坛 HTML 文本框中的所有脚本

Question

我正在尝试编写一个 HTML 文本框，其中包含一个按钮来复制特定 div 类的所有文本内容。

该代码确实复制文本，但是，它复制整个页面(论坛上的多个帖子)的文本，而不是复制感兴趣的一个帖子。有没有办法阻止它这样做？

到目前为止我的代码如下，非常感谢您的帮助

<div class="main">
  <div class="container">
    <div class="codebox">   
      <div class="ipsCode_citation">
        <div style="float:right">
          <button onclick="copyText()">Copy</button>
        </div>
        Code:
      </div>
      <p>&nbsp;</p>
    </div>
  </div>
</div>
<p>&nbsp;</p>

<div id="output"></div>

<script>
  function copyText(){
    var outputText = "";
    var targets = document.getElementsByClassName('codebox');
    for (var i = 0; i < targets.length; i++) {
      outputText += targets[i].innerText;
    }
    var output = document.getElementById('output');
    output.innerText = outputText;
    var range = document.createRange();
    range.selectNodeContents(output);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
    output.style.display = 'none';
  }
</script>

尝试应用马特·韦伯斯的建议。这是在正确的线上吗？

<div class="codebox">   
  <div>
    <button class="codeBtn">Copy</button>
  </div>
<p>&nbsp;</p> Some text to copy
</div>

<script>

var copyBtn = document.querySelector('.codeBtn');

copyBtn.addEventListener('click', function(event) {
  var copyText = document.querySelector('.codebox');
  copyText.select();

  var successful = document.execCommand('copy');
});

</script>

Answer 1

这是您需要的示例，这会将 .codebox 中的内容复制到剪贴板。

超文本标记语言

<div>
  <textarea class="codebox">function helloWorld() {}</textarea>
</div>

<div>
  <button class="codeBtn">Copy</button>
</div>

JS

var copyBtn = document.querySelector('.codeBtn');

copyBtn.addEventListener('click', function(event) {
  var copyText = document.querySelector('.codebox');
  copyText.select();

  var successful = document.execCommand('copy');
});

示例: JsFiddle

更新

要从按钮所在的特定区域获取文本(或 html)，使用您提供的 html，您可以执行类似的操作，注意我使用了隐藏的 textarea 所以我们仍然可以使用document.execCommand('copy'):

超文本标记语言

<div class="codebox">
  <div class="ipsCode_citation">
    <div style="float:right">
      <button class="codeBtn">Copy</button>
    </div>
    Code:
    <textarea style="display:none" id="hidden-codebox"></textarea>
  </div>
</div>

脚本语言

var copyBtn = document.querySelector('.codeBtn');

copyBtn.addEventListener('click', function(event) {
  // copy element text:
  var copyText = document
    .querySelector('.codeBtn') // button
    .parentElement // div
    .parentElement // div.ipsCode_citation
    .parentElement.innerText; // div.codebox

  // push to HIDDEN textarea:
  var hiddenCode = document.getElementById('hidden-codebox');
  hiddenCode.value = copyText;
  hiddenCode.select();

  try {
    var status = document.execCommand('copy');
    if (!status) {
      console.error("Cannot copy text");
    } else {
      console.log("The text is now on the clipboard");
    }
  } catch (err) {
    console.log('Unable to copy.');
  }
});

示例: JsFiddle