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

本文共 1249 字,大约阅读时间需要 4 分钟。

  hot3.png

好程序员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也是可以用的

 

<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');

});

转载于:https://my.oschina.net/530504/blog/3036036

你可能感兴趣的文章
java对象--继承的好处和特点
查看>>
MySQL 5.6 for Windows 解压缩版配置安装
查看>>
solrCloud+tomcat+zookeeper集群配置
查看>>
/etc/fstab,/etc/mtab,和 /proc/mounts
查看>>
Apache kafka 简介
查看>>
socket通信Demo
查看>>
技术人员的焦虑
查看>>
js 判断整数
查看>>
建设网站应该考虑哪些因素
查看>>
mongodb $exists
查看>>
js实现页面跳转的几种方式
查看>>
sbt笔记一 hello-sbt
查看>>
常用链接
查看>>
pitfall override private method
查看>>
springMVC数据绑定
查看>>
!important 和 * ----hack
查看>>
聊天界面图文混排
查看>>
控件的拖动
查看>>
svn eclipse unable to load default svn client的解决办法
查看>>
Android.mk 文件语法详解
查看>>