通过 clipboard 实现点击复制
clipboard 简介:
clipboard 是一个很小的JS框架,我们只需要通过 script 标签将其引入,就可以使用它提供的复制功能。
方法一:将待复制的值放在 data-clipboard-text 中,当点击该标签的时候就会将该值复制到剪贴板
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <button data-clipboard-text="将文本内容放在clipboard text中实现复制" class="btn-1"> 点击复制(将文本内容放在clipboard text中实现复制) </button> <script> var clipboard = new ClipboardJS('.btn-1'); //先实例化 clipboard.on('success', function(e) { alert('复制成功'); // 复制成功的事件 }); clipboard.on('error', function(e) { alert('复制失败'); // 复制失败的事件 }); </script>
方法二:通过 data-clipboard-target 从另一个元素复制文本
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <!-- Target --> <input id="foo" value="https://getcharzp.cn"> <!-- Trigger --> <button data-clipboard-target="#foo" class="btn-2"> 点击复制 </button> <script> var clipboard = new ClipboardJS('.btn-2'); //先实例化 clipboard.on('success', function(e) { alert('复制成功 2'); // 复制成功的事件 }); clipboard.on('error', function(e) { alert('复制失败 2'); // 复制失败的事件 }); </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步