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

});

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69913892/viewspace-2641188/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69913892/viewspace-2641188/