通过 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>
复制代码
posted @   GetcharZp  阅读(949)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示