clipboard.js（web页面实现点击复制）

最新推荐文章于 2025-09-24 13:06:23 发布

原创最新推荐文章于 2025-09-24 13:06:23 发布 · 358 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

文章目录

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);
 });