Get the App
SLTechnology News&Howtos  ›  Internet Technology  › 

What is the method of using js clipboard Clipboard.js

Shulou Source: shulou.com Published: 2022-06-01 13:51:57 10月04日 Update

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

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 使用方法是什么,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。

Tags: Cut success signal manual usage method element content function dynamic that is skill knowledge compact ordinary concise weird safe concise to the point code Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno macOS Docker Redmi Shulou Information Xiaomi