千家信息网

js剪切板Clipboard.js 使用方法是什么

发表于:2025-02-03 作者:千家信息网编辑
千家信息网最后更新 2025年02月03日,本篇文章为大家展示了js剪切板Clipboard.js 使用方法是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。js剪切板Clipboard.jsclip
千家信息网最后更新 2025年02月03日js剪切板Clipboard.js 使用方法是什么

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

0