码迷,mamicode.com
首页 > Web开发 > 详细

[Note] Clipboard.js 使用

时间:2019-04-11 19:11:33      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:javascrip   微信   for   代码   剪切板   mui   aaa   attr   attribute   

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/

[Note] Clipboard.js 使用

标签:javascrip   微信   for   代码   剪切板   mui   aaa   attr   attribute   

原文地址:https://www.cnblogs.com/arcsinw/p/10691531.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!