clipboard 相关问题

在此代码片段中，我使用 Clipboard.js 从 a 元素复制文本，复制 data-clipboard-text 属性中保存的数据。效果很好，如下所示：在此代码片段中，我使用 Clipboard.js 从 a 元素复制文本，复制 data-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 站点看到了“从另一个元素复制文本”选项：  <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">  <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/  <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">  <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>

javascript html clipboard clipboard.js

回答 1 投票 0

clipboard 相关问题

最新问题