本文共 1150 字,大约阅读时间需要 3 分钟。
好程序员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也是可以用的
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');
});
转载地址:http://exytl.baihongyu.com/