如何使用 HTML/JS 中的按钮将来自 Anchor 的 href 链接复制到剪贴板？答案

【问题标题】：How to use a button in HTML/JS to copy to the Clipboard the href link from an Anchor?如何使用 HTML/JS 中的按钮将来自 Anchor 的 href 链接复制到剪贴板？
【发布时间】：2020-03-09 09:05:51
【问题描述】：

我有一个 html 文件，其中的表格在每一行中收集了几个 Web 链接 (url)，并且在同一个表格中，我希望每一行都有一个按钮，它将该行的链接复制到剪贴板（嵌入作为锚标记中的“href”），向用户提供反馈弹出窗口。

我已经尝试了多种方法，但似乎大多数可用示例都显示了如何仅针对输入字段实现这一点，此外，硬编码函数不接收作为参数的文本的参考 ID复制。

有什么想法吗？

-更新- 感谢 Maassander 的建议，我解决了我的问题。不幸的是，建议的线程对我的问题不够具体： How do I copy to the clipboard in JavaScript?

【问题讨论】：

这能回答你的问题吗？ How do I copy to the clipboard in JavaScript?
非常感谢，但该线程并没有完全达到我的目的。我需要专门从一个html表格的多行复制href内容，使用按钮，Maassander的答案肯定解决了我的问题。再次感谢。

标签： javascript html button href clipboard

【解决方案1】：

我猜这个最基本的版本应该是这样的：

var rows = document.getElementsByClassName('table-row');

for (var i = 0; i < rows.length; i++){
  var button = rows[i].querySelector('button');
  
  button.addEventListener('click', function(e){
    var link = e.target.closest('tr').querySelector('a');
    var tempText = document.createElement('textarea');
    tempText.value = link.href;
    document.body.appendChild(tempText);
    tempText.select();
    document.execCommand('copy');
    document.body.removeChild(tempText);
  });
}

<table>
  <tr class="table-row">
    <td><a href="https://www.google.com">Google</a></td>
    <td><button type="button">Copy</button></td>
  </tr>
  <tr class="table-row">
    <td><a href="https://stackoverflow.com/">Stack Overflow</a></td>
    <td><button type="button">Copy</button></td>
  </tr>
</table>

【讨论】：

非常感谢 Maassander，这似乎正是我想要的，在你的 sn-p 中它就像一个魅力。对不起我对这个话题的无知，但我会在我的 html 文件中嵌入必要的 javascript 代码吗？我试过使用
@Thorh73，我回答的第一部分是您将放在标记中的内容。您可以编辑您的问题并将您当前的代码放在那里吗？这会让你更容易发现哪里出错了。
非常感谢...我的错误是将脚本部分放在表格的 html 代码之前：在这种情况下，脚本代码无法识别按钮。当我在表格代码之后移动脚本部分时，一切都按预期工作！非常感谢！