时间戳

首页 > 解决方案 > 如何使用 HTML/JS 中的按钮将来自 Anchor 的 href 链接复制到剪贴板？

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

问题描述

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

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

有任何想法吗？

-更新-由于 Maassander 的建议，我解决了我的问题。不幸的是，建议的线程对我的问题不够具体： 如何在 JavaScript 中复制到剪贴板？

标签： javascripthtmlbuttonhrefclipboard

解决方案

我猜这个最基本的版本看起来像这样：

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>

推荐阅读