Clipboard 实现网页复制粘贴

Clipboard.js 实现了纯 JavaScript 无 Flash的浏览器内容复制到系统剪贴板的功能 地址如下 http://www.oschina.net/news/78478/clipboardjs-v-1 操作起来也挺简单,如果是一个页面一个复制按钮相信按照官网教程就能写好 我也写下来吧 <!– html –><button class=”btn” data-clipboard-text=”Just because you can doesn’t mean you should — clipboard.js”> Copy to clipboard</button>// 引进 clipboard<script src=”clipboard.min.js”></script>// JQvar clipboard = new Clipboard(‘.btn’);clipboard.on(‘success’, function(e) { alert(‘成功’);});clipboard.on(‘error’, function(e) { alert(‘失败’);}); 但是有些时候我们同个页面可能需要几个复制功能,在下在此就遇到点坑了 <!–html部分–><div class=”dizhi-modal zi-modal” style=”display: none;”><p>地址1</p><p class=”copy-dizhi2″>我是要复制的内容1</p><a href=”#” data-clipboard-action=”copy”>复制地址1</a></div><div class=”dizhi-modal ren-modal” style=”display: none;”><p>地址2</p><p class=”copy-dizhi”>我是要复制的内容2</p><a href=”#” data-clipboard-action=”copy” >复制地址2</a></div> // JQ 部分// 这段代码需要两次点击才能触发复制效果,并且多次点击会叠加弹窗//为两个按钮添加自动绑定事件$(“.zi-modal a,.ren-modal a”).on(‘click’,function(){var val = $(this).prev().html();// alert(val);var zidong_ma = new Clipboard(this,{ text: function() { return val; }}); zidong_ma.on(‘success’, function(e) { // 复制成功回调函数 console.log(e); alert(‘已添加至粘贴板。’) }); zidong_ma.on(‘error’, function(e) { //复制失败回调函数 console.log(e); alert(‘复制失败,请重试。’) });}) 造成原因我是这样认为的 每次绑定的时候都会将 Clipboard 重新实例化,然而之前实例化成功的对象并没有销毁,所以这个方式 貌似行不通 然后再看文档 https://clipboardjs.com/ 里边的这段 <!– Trigger –><button class=”btn” data-clipboard-text=”Just because you can doesn’t mean you should — clipboard.js”> Copy to clipboard</button> 说明 Clipboard 默认会将  data-clipboard-text 这个属性的值放到粘贴板 所以我们只需要改变 data-clipboard-text 的值就可以了 所以上面的代码改为 // 点击复制地址,只实例化一次即可 var ren_ma = new Clipboard(‘.ren-modal > a’), //动态变化的是需要复制的值$(‘.ren-modal > a’).click(function () { var copyText1 = $(this).siblings(‘.copy-dizhi’).text(); $(this).attr(‘data-clipboard-text’, copyText1);}) ren_ma.on(‘success’, function(e) { alert(‘成功’);});ren_ma.on(‘error’, function(e) { alert(‘失败’);}); github 上面的似乎太过复杂 附上单个的 js js 下载地址  
工作日志

Atom 插件记录

2017-8-27 15:07:20

工作日志

linux服务器被攻击后处理方法

2017-9-1 17:19:46

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索