js剪切板_Clipboard.js 使用
发布时间:2020-01-06 03:44

mg游戏中心,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就是这个模态框

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 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');});
下一篇:没有了