[Note] Clipboard.js 使用

clipboard.js是一個用來設置剪切板的庫，小巧無依賴，但用法有點詭異，必須依賴一個DOM元素

據做者說，因爲瀏覽器相關安全策略的緣故，沒法使用下面這種方式來設置剪切板

clipboard.copy('text to copy');

必需要與一個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就是這個模態框

For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container value.

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');
});

Reference

1. https://clipboardjs.com/