通过 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>