[ZeroClipboard] 跨浏览器复制到剪贴板

最新推荐文章于 2018-03-12 09:10:12 发布

原创最新推荐文章于 2018-03-12 09:10:12 发布 · 797 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

本文介绍了一种跨浏览器实现复制到剪贴板的方法，针对不同浏览器采用不同的技术手段，重点介绍了使用ZeroClipboard库来确保兼容性，尤其是IE8及更高版本。

跨浏览器复制到剪贴板的功能，网上代码太多，包括jQuery zclip都做了尝试，结果让人很沮丧，不知什么原因没有成功，最后通过原生ZeroClipboard实现

参考文档

ZeroClipboard 免费CDN服务：http://www.bootcdn.cn/zeroclipboard/
ZeroClipboard 2.x 快速入门详解：http://www.365mini.com/page/zeroclipboard-2_x-quick-start.htm
ZeroClipboard 2.0复制功能：http://my.oschina.net/shniu/blog/298406?p=1

代码示例

看完上面的两篇博客很容易就整理出来了，为了兼容IE8，使用2.0.2版本

引入JS

<script src="//cdn.bootcss.com/zeroclipboard/2.0.2/ZeroClipboard.Core.min.js"></script>
<script src="//cdn.bootcss.com/zeroclipboard/2.0.2/ZeroClipboard.min.js"></script>

function copyToClipboard(){
     if ( window.clipboardData ) {  
         $('#copybutton').click(function() {  
             window.clipboardData.setData("Text", $("#copyinput").val());  
             alert("分享链接已经复制到剪贴板");
         });  
     } else {
    	 var client = new ZeroClipboard( $('#copybutton') );
         client.on( 'ready', function(event) {
        	 // console.log( 'movie is loaded' );
        	 client.on( 'copy', function(event) {
        		 event.clipboardData.setData('text/plain',$("#copyinput").val());
        	 } );
        	 client.on( 'aftercopy', function(event) {
        		 //console.log('Copied text to clipboard: ' + event.data['text/plain']);
        		 alert("分享链接已经复制到剪贴板");
        	 } );
         } );
         client.on( 'error', function(event) {
        	 // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
        	 ZeroClipboard.destroy();
         } );
     }  
}

标签

#ZeroClipboard