好程式設計師web前端分享js剪下板Clipboard.js 使用

好程式設計師 web 前端 分享 js 剪下板 Clipboard.js 使用 ， clipboard.js 是一個用來設定剪下板的庫，小巧無依賴，但用法有點詭異，必須依賴一個 DOM 元素。

 

必須要與一個 DOM 元素相關聯，並且需要使用者的點選操作才能實現功能（這樣看來，瀏覽器還是挺安全的）

 

普通使用推薦下面這種用法，這裡的 text 可以動態設定，可以寫一個 js 函式動態返回 text

 

var clipboard = new ClipboardJS('#btn', {

    text: function(trigger) {

        return trigger.getAttribute('aria-label');

        // return randomText();

    }

});

 

 

clipboard.on("success", function (e) {

    console.log(" 複製成功 ");

});

 

clipboard.on("error", function (e) {

    console.log(" 複製失敗，請手動複製 ");

});

 

 

如果要在 bootstrap 的 modal 中使用，上面的程式碼會無法正常工作，需要在建構函式里多傳入一個 container ，這個 container 就是這個模態框

 

var clipboard = new ClipboardJS('#btn', {

    text: function(trigger) {

        return trigger.getAttribute('aria-label');

    },

    container: document.getElementById('dialog')

});

 

clipboard.on("success", function (e) {

    console.log(" 複製成功 ");

});

 

clipboard.on("error", function (e) {

    console.log(" 複製失敗，請手動複製 ");

});

 

 

介面裡沒有 button 也是可以用的

 

<span id="wechat_account" data-clipboard-text="aaa">aaa</span>

jQuery(document).on('tap', '#wechat_account', function (evt) {

    var clipboard = new ClipboardJS("#wechat_account");

    clipboard.on("success", function (e) {

        mui.toast(" 微   訊號複製成功 ");

    });

    clipboard.on("error", function (e) {

        mui.toast(" 微 - 訊號複製失敗，請手動輸入微 - 訊號 ");

    });

    $('#wechat_account').trigger('click');

});