Clipboard.js 动态复制内容的方法
clipboard.js的使用很简单,也支持很多浏览器,不依赖flash即可复制,还可自定义复制事件,非常方便,如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(['clipboard.min'], function() { var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { e.clearSelection(); use(['bfwtoast', "bfwtoast"], function() { $.toast("复制成功", 2000); }); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); use(['bfwtoast', "bfwtoast"], function() { $.toast("复制失败", 2000); }); }); }); }); </script> </head> <body> <button data-param="test" id="copyBtn" class="btn" data-clipboard-action="copy" data-clipboard-target="#copyTarget">点我复制到剪切板</button> <div id="copyTarget"> BFW.WIKI </div> <!--隐藏目标对象--> </body> </html>但是项目中需要动态更改复制内容,不是固定的,怎么办呢,其实clipboard.js,支持text监听劫持,在复制之前将target中的内容改掉就ok了,这样就实现了动态复制对象和内容的功能了,示例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(["clipboard"], function() { new Clipboard('.btn', { text: function(trigger) { var param = $(trigger).data("param"); /*获取目标对象上挂载的参数test*/ $("#copyTarget").html("bfw.wiki"); return trigger.getAttribute('aria-label'); } }); }); }); </script> </head> <body> <button data-param="test" id="copyBtn" class="btn" data-clipboard-action="copy" data-clipboard-target="#copyTarget">点我复制到剪切板</button> <div id="copyTarget" style="opacity: 0;"></div> <!--隐藏目标对象--> </body> </html>
网友评论0