javascript - 单击按钮时如何将 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，可用于通过您的文本引用该元素。

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

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

现在我们更改您的 status函数通过 data 属性中指定的 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)">