好程式員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就是這個模态框

text: function(trigger) {
    return trigger.getAttribute('aria-label');
},
container: document.getElementById('dialog')           

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

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

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

aaa

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

http://www.goodprogrammer.org/portal.php