使用zeroclipboard Js插件，实现跨浏览器复制

最新推荐文章于 2017-12-16 13:53:10 发布

转载最新推荐文章于 2017-12-16 13:53:10 发布 · 369 阅读

文章标签：

#javascript

本文介绍如何在网页中使用ZeroClipboard.js插件实现元素复制功能，包括插件引入、初始化代码及示例应用。

步骤如下：

1、把ZeroClipboard.swf这个flash文件跟ZeroClipboard.js这个文件放在同一个目录

我们这里选择使用的是 2.2.0 版本的

2、页面上引入插件文件ZeroClipboard.js，代码如下：

<script type="text/javascript" src="ZeroClipboard.js"></script>

3,在下面初始化<script>
		// 直接调用
		var clip=new ZeroClipboard($('#copy-url'));
		clip.on('ready', function(){
			var $content = '给你推荐一首歌词：'+ $('#copy-content').val();
			clip.setText($content);
			this.on('aftercopy', function(event){
				alert('已经复制剪贴板');
			});
		});
	</script>


4。demo案例如下：

<div class="input-append ml0 span6">
<input class="input-block-level " id="copy-content" value="http://www.gecihui.com/Lyric/detail/id/222.html" type="text">
<button class="btn" id="copy-url" type="button">复制</button>
</div>