js剪切板Clipboard.js使用方法是什么-创新互联

本篇文章为大家展示了js剪切板Clipboard.js 使用方法是什么，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联是一家专注于网站制作、成都网站设计与策划设计,金平网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:金平等地区。金平做网站价格咨询:028-86922220

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也是可以用的

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

});

上述内容就是js剪切板Clipboard.js 使用方法是什么，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联-成都网站建设公司行业资讯频道。

当前题目：js剪切板Clipboard.js使用方法是什么-创新互联
本文网址：http://mswzjz.cn/article/dhghjj.html