文章目录
- code
- show
一个很简单的需求,一个单页面需要一个点击复制的功能
后来在线上找到一个clipboard.js可以实现,这里只用到了最基础的用法,页面样式布局基于bootstrap5.2.3
code
<div class="d-flex align-items-center justify-content-center w-100"><div class="me-4 px-8 py-2" style="height: 100px; background: url(./img/202405311837364.png) no-repeat; width: 60%; background-size: cover"><input id="copyValue" class="w-100 copy h-100 fs-3" type="text" value="0x3d2eF97dC93341Af0a3686395059b8EfCBfcCF26" /></div><img class="to_copy" data-clipboard-target="#copyValue" style="width: 32px; cursor: pointer" src="./img/202405311826855.png" alt="" />
</div><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
// 复制
var clipboard = new ClipboardJS(".to_copy");clipboard.on("success", function (e) {alert("复制成功");e.clearSelection();});clipboard.on("error", function (e) {console.error("Action:", e.action);console.error("Trigger:", e.trigger);});