好程序员 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');

});