复制论坛 HTML TextBox 上的所有脚本

Question

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

该代码确实会复制文本，但是，它会从整个页面（论坛上的多个 post 页面）而不是感兴趣的 post 复制文本。有没有办法阻止它这样做？

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

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

试图应用 Matt Webbs 的建议。这是在正确的行上吗？

<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 中的内容复制到剪贴板。

HTML

<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'):

HTML

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

JAVASCRIPT

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

复制论坛 HTML TextBox 上的所有脚本

Copy All Script on Forum HTML TextBox

html

javascript

forum

更新