使用 JS 将多个元素的 innerText 复制到剪贴板

Question

我有下面的 HTML 代码，我想使用 Javascript 将每个 p 元素的 innerText 复制到剪贴板。 innerText值是动态随机生成的。

<div class="colour-palette-showcase">
  <div class="colour-value">
    <div class="colour"></div>
    <p class="colour-value-text"></p>
  </div>
  <div class="colour-value">
    <div class="colour"></div>
    <p class="colour-value-text"></p>
  </div>
  <div class="colour-value">
    <div class="colour"></div>
    <p class="colour-value-text"></p>
  </div>
  <div class="colour-value">
    <div class="colour"></div>
    <p class="colour-value-text"></p>
  </div>
  <div class="colour-value">
    <div class="colour"></div>
    <p class="colour-value-text"></p>
  </div>
</div>

我已将 .colour-value-text 存储到一个变量，运行和 forEach 并将其存储到一个新变量。但是当我然后尝试 document.execCommand('copy') 时，它会循环并只复制最后一个。我猜我需要将所有值存储到一个数组中，然后将其复制到剪贴板。还是我做错了？

非常感谢任何帮助。这是我第一次尝试一个小的 JS 项目。

谢谢

Answer 1

是这样的吗？

 const range = document.createRange();
 range.selectNode(document.getElementById("example"));
 window.getSelection().addRange(range);
 document.execCommand("copy");

ofc 你可以使用 document.getElementsByClassName("example");

Answer 2

这是一个代码示例，它将所有 <p> 的 innerHTML 复制到一个数组，然后从该数组复制到一个临时 textarea，从那里将完整的值复制到您的剪贴板：

document.getElementById('copy-button').onclick = function() {
  let values = [];
  document.querySelectorAll('.colour-value-text').forEach( (p) => values.push( p.innerHTML ) );
  let text = document.createElement('textarea');
  document.body.appendChild(text);
  text.value = values.join(', ');
  text.select();
  document.execCommand('copy');
  text.parentNode.removeChild(text);
}

  <div class="colour-palette-showcase">
           <div class="colour-value">
             <div class="colour"></div>
             <p class="colour-value-text">1</p>
           </div>
           <div class="colour-value">
             <div class="colour"></div>
             <p class="colour-value-text">2</p>
           </div>
           <div class="colour-value">
             <div class="colour"></div>
             <p class="colour-value-text">3</p>
           </div>
           <div class="colour-value">
             <div class="colour"></div>
             <p class="colour-value-text">4</p>
           </div>
           <div class="colour-value">
             <div class="colour"></div>
             <p class="colour-value-text">5</p>
           </div>
         </div>

  <button id="copy-button" type="button">copy</button>

已复制到剪贴板： 1, 2, 3, 4, 5

使用 JS 将多个元素的 innerText 复制到剪贴板

Copy innerText of multiple element to Clipboard, using JS

javascript

foreach

clipboard

innertext