在此代码片段中，我使用 Clipboard.js 从
adata-clipboard-text效果很好，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<a class="btn btn-sm btn-primary copy_data" data-clipboard-text="that, that and the other">Copy</a>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.copy_data');;
clipboard.on('success', function(e) {
e.trigger.innerHTML = "Copied!"
setTimeout(function() {
e.trigger.innerHTML = "Copy"
}, 1800);
e.clearSelection();
});
</script>
</body>
</html>我正在努力解决的问题是，是否可以将复制链接保留在页面顶部，但要针对单独的元素定义复制的数据？
例如，代替这个：
<a class="btn btn-sm btn-primary copy_data" data-clipboard-text="that, that and the other">Copy</a>
我可以这样做吗：
<a class="btn btn-sm btn-primary copy_data">Copy</a>
包含要复制到页面下方的数据的元素 - 例如
<div data-clipboard-text="that, that and the other"></div>
这似乎是一个愚蠢的请求，但我问的原因是，由于我使用复制功能的页面构建方式，复制按钮需要位于页面顶部，但位于HTML 是为了显示复制按钮而编写的，要复制的内容尚未生成 - 直到页面下方才会生成。
因此我想如果我仍然可以将要保存的数据保留在
data-clipboard-text但是，我无法弄清楚如何使用 Clipboard.js 实现该结果。理想情况下，我仍然想使用 Clipboard.js 来实现复制功能。
编辑：我从 Clipboard.js 站点看到了“从另一个元素复制文本”选项：
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
但是，我不想从输入元素或文本区域复制内容，而是想从不同元素的 data-clipboard-text 属性复制数据，但我不确定该怎么做？
谢谢
一个非常常见的用例是从另一个元素复制内容。您可以通过在触发器元素中添加
属性来做到这一点。data-clipboard-target
— https://clipboardjs.com/
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>