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