单击按钮时如何将for-each循环中的文本复制到剪贴板？

Question

我有一个 for-each 循环，它从数据库中打印出一些文本并显示一个按钮。所以基本上我有多个文本“区域”，每个区域都有自己的按钮。我想要这样，每当用户点击一个按钮时，它匹配的特定文本就会被复制到剪贴板。

在发帖之前，我尝试对此进行多次搜索。但是，从其他解决方案中，我读到它们或多或少地显示了在输入标签中复制文本的解决方案。但是，在我的情况下，用户没有输入任何需要复制的内容 - 文本已经在屏幕上并且无法更改。

我无法复制与按钮匹配的特定文本，因为该文本没有特定的 id 或类名，因为它只是在循环时打印文本，因此它们都具有相同的类名。那么我如何使用该按钮指定特定文本，因为按钮可以按任何顺序按下？

HTML：

<c:forEach items="${items}" var="item">
<h2>${item.itemDescription}</h2>
<input class="big-button" type="button" value="Add item copied to clipboard" id="btn" onclick="status(this)">
</c:forEach>

JavaScript：

function status(clickedBtn) 
  {
    clickedBtn.value = "Copied to clipboard";
    clickedBtn.disabled = true;
    clickedBtn.style.color = 'white';
    clickedBtn.style.background = 'gray';
  }

Answer 1

我会更改您的 HTML 以生成某种 ID，该 ID 可用于在您的文本中引用元素。

<c:forEach items="${items}" var="item" varStatus="loop">
    <h2 id="item-desc-${loop.index}">${item.itemDescription}</h2>
    <input class="big-button" data-desc-ref="item-desc-${loop.index}" type="button" value="Add item copied to clipboard" id="btn" onclick="status(this)">
</c:forEach>

在上面我添加了代码以在每个 <h2> 元素上生成一个唯一的 ID（例如 id="item-desc-0"）。在按钮上，我添加了一个data- 属性来引用<h2> 的ID，以便我们稍后检索它。

现在我们更改您的status 函数以通过数据属性中指定的ID 查找元素，并获取其innerText（开始和结束标记之间的内容）。

然后，您可以将该文本传递给将其复制到剪贴板的函数，在我的评论中参考上面。

  function status(clickedBtn) 
  {
    var text = document.getElementById(clickedBtn.dataset.descRef).innerText;
    copyToClipboard(text);

    clickedBtn.value = "Copied to clipboard";
    clickedBtn.disabled = true;
    clickedBtn.style.color = 'white';
    clickedBtn.style.background = 'gray';
  }

这是一个工作示例。我必须放入将由您的循环生成的示例 HTML。

function copyToClipboard(text) {
  if (window.clipboardData && window.clipboardData.setData) {
    // IE specific code path to prevent textarea being shown while dialog is visible.
    return clipboardData.setData("Text", text);

  } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
    var textarea = document.createElement("textarea");
    textarea.textContent = text;
    textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
    document.body.appendChild(textarea);
    textarea.select();
    try {
      return document.execCommand("copy"); // Security exception may be thrown by some browsers.
    } catch (ex) {
      console.warn("Copy to clipboard failed.", ex);
      return false;
    } finally {
      document.body.removeChild(textarea);
    }
  }
}

function status(clickedBtn) {
  var text = document.getElementById(clickedBtn.dataset.descRef).innerText;

  copyToClipboard(text);

  clickedBtn.value = "Copied to clipboard";
  clickedBtn.disabled = true;
  clickedBtn.style.color = 'white';
  clickedBtn.style.background = 'gray';
}

<h2 id="item-desc-0">Testing 0</h2>
<input class="big-button" data-desc-ref="item-desc-0" type="button" value="Add item copied to clipboard" id="btn" onclick="status(this)">

<h2 id="item-desc-1">Testing 1</h2>
<input class="big-button" data-desc-ref="item-desc-1" type="button" value="Add item copied to clipboard" id="btn" onclick="status(this)">

<h2 id="item-desc-2">Testing 2</h2>
<input class="big-button" data-desc-ref="item-desc-2" type="button" value="Add item copied to clipboard" id="btn" onclick="status(this)">

Answer 2

如果h2 元素恰好位于previous 或button 上，则可以这样使用。

function status(clickedBtn) 
    {
      clickedBtn.value = "Copied to clipboard";
      clickedBtn.disabled = true;
      clickedBtn.style.color = 'white';
      clickedBtn.style.background = 'gray';

      //New Code
      copyToCliboard(clickedBtn.previousSibling);
    }
    function copyToCliboard(el) {
      if (document.body.createTextRange) {
          var range = document.body.createTextRange();
          range.moveToElementText(el);
          range.select();
      } else {
          var selection = window.getSelection();
          var range = document.createRange();
          range.selectNodeContents(el);
          selection.removeAllRanges();
          selection.addRange(range);
      }
      document.execCommand("copy");
      window.getSelection().removeAllRanges();
  }

h2{
display:inline;
}

<html>
  <head>
 </head>
  <body>
   <div><h2>Text1</h2><button onclick="status(this)">Copy</button></div>
   <div><h2>Text2</h2><button onclick="status(this)">Copy</button></div>
  </body>
</html>

Answer 3

Cory 提供了一个非常有用的指向剪贴板方面的链接，我想我会提供有关如何定位点击的元素的信息。

要实现这一点，请将event 传递给您的onclick 属性，并使用event.target 来引用被点击的元素。这是一个基本示例：

function copy(e) {
	alert(e.target.value)
}

<button onclick="copy(event)" value="copy this">copy this</button>
<button onclick="copy(event)" value="copy that">copy that</button>

为了满足您的特定要求，如果您将item.itemDescription 放入value 属性中，那么它将复制您想要的文本。