ZeroClipboard跨浏览器复制粘贴

weixin_30699463

于 2016-12-16 09:59:00 发布

阅读量45

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/toward-the-sun/p/6185768.html

本文介绍如何使用 ZeroClipboard 库实现跨浏览器的复制功能。通过 Flash 技术，可以实现在不同浏览器间的文本复制操作，并提供了兼容方案。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>ZeroClipboard跨浏览器复制粘贴</title>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src="ZeroClipboard.min.js"></script>
 7 </head>
 8 <body>
 9 <input value="http://www.baidu.com?recommnd=wuhan" id="input">
10 <button id="copy">点击复制</button>
11 <script type="text/javascript">
12     var client = new ZeroClipboard(document.getElementById("copy"), {
13         moviePath: './ZeroClipboard.swf'
14     });
15     client.on('load', function(client) {// alert( 'swf文件已加载' );
16         
17         client.on('datarequested', function(client) {//这个时间必须监听,执行复制的代码放在这个回调里
18             client.setText(document.getElementById("input").value);
19         });
20 
21         client.on('complete', function(client, args) { //复制完成后的提示，可有可无
22             alert("Copied text to clipboard: " + args.text);
23         });
24     });
25 
26     client.on('wrongflash noflash', function() { //当浏览器不支持flash触发的事件,可有可无，这里可以写兼容代码
27         ZeroClipboard.destroy();
28         var copyDom = document.getElementById('input');
29         copyDom.select();//选中需要复制的内容
30         document.execCommand('Copy');//执行浏览器复制命令
31     });
32 </script>
33 </body>
34 </html>

转载于:https://www.cnblogs.com/toward-the-sun/p/6185768.html