博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
好程序员web前端分享js剪切板Clipboard.js 使用
阅读量:7006 次
发布时间:2019-06-27

本文共 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/

你可能感兴趣的文章
Python(四)装饰器、迭代器&生成器、re正则表达式、字符串格式化
查看>>
我的友情链接
查看>>
多个viewpager可能产生的问题
查看>>
理解自组织:敏捷里的自组织团队都是骗人的
查看>>
Java监控神器之psi-probe监控Tomcat和应用
查看>>
LCT
查看>>
VIJOS-P1635 城市连接
查看>>
chown命令详情
查看>>
强数学归纳法
查看>>
第三次作业结对编程
查看>>
jQuery总结(摘抄)
查看>>
_stat函数/struct stat 结构体使用笔记
查看>>
二分搜索 HDOJ 2289 Cup
查看>>
Byte[]、Image、Bitmap 之间的相互转换
查看>>
分布式全文检索引擎之ElasticSearch
查看>>
数组名和指针区别
查看>>
实现子数组和绝对值差最小 - Objective-C
查看>>
明天支付宝就开始提现收费了!这几招可以让你受用
查看>>
洛谷P4774 屠龙勇士
查看>>
mediascanner流程
查看>>