[Note] Clipboard.js 使用
Posted arcsinW
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Note] Clipboard.js 使用相关的知识,希望对你有一定的参考价值。
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
以上是关于[Note] Clipboard.js 使用的主要内容,如果未能解决你的问题,请参考以下文章
移动端无法复制:使用clipboard.js碰到的一个小问题